制作一个表格，显示班级的学生信息。

编程练习

制作一个表格，显示班级的学生信息。

要求：

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

3. 点击删除按钮，则删除当前行

<!DOCTYPE html>
<html><head><title> new document </title>  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   <script type="text/javascript">  window.onload = function(){Highlight();}  function addOne(obj){ var tbody = document.getElementById('table').lastChild;  var tr = document.createElement('tr');  var td = document.createElement("td");td.innerHTML = "<input type='text'/>";tr.appendChild(td);td = document.createElement("td");     td.innerHTML = "<input type='text'/>";tr.appendChild(td);td = document.createElement("td");    td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>删除</a>";tr.appendChild(td);   tbody.appendChild(tr);   Highlight();}function deleteRow(obj){var tbody = document.getElementById('table').lastChild;  var tr = obj.parentNode.parentNode;tbody.removeChild(tr);}function Highlight(){var tbody = document.getElementById('table').lastChild;    trs = tbody.getElementsByTagName('tr');   for(var i =1;i<trs.length;i++){trs[i].onmouseover = function(){this.style.backgroundColor ="#f2f2f2";} trs[i].onmouseout = function(){this.style.backgroundColor ="#fff";} }  }</script> </head> <body> <table border="1" width="50%" id="table"><tr><th>学号</th><th>姓名</th><th>操作</th></tr>  <tr><td>xh001</td><td>王小明</td><td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td></tr><tr><td>xh002</td><td>刘小芳</td><td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td></tr>  </table><input type="button" value="添加一行" onclick="addOne()" /></body>
</html>

转载于:https://www.cnblogs.com/yjhua/p/4597182.html

制作一个表格，显示班级的学生信息。相关推荐

表格学生表html,js编程练习：制作一个表格，显示班级的学生信息。
要求: 鼠标移到不同行上时背景色改为蓝色,移开鼠标时则恢复为原背景色白色点击添加按钮,能动态在最后添加一行点击删除按钮,则删除当前行 new document window.onload = f ...
制作一个评选优秀老师和学生的系统，系统根据提示输入类别（老师或学生），如果是老师则输入姓名和论文数，学生则输入姓名和考试成绩，输入若干人员信息后使用结束符完成输入，程序根据输入的数据列出优秀老师和优
制作一个评选优秀老师和学生的系统,系统根据提示输入类别(老师或学生), 如果是老师则输入姓名和论文数,学生则输入姓名和考试成绩,输入若干人员信息后使用结束符完成输入,程序根据输入的数据列出优秀老师和优 ...
制作一个状态栏中跑马灯效果_图标设计指南(3)——制作一个图标集所需全部信息（中）...
本文翻译自图标设计专家Justas Galaburda写的图标设计指南.本文主要介绍制作一个图标集所需全部信息(中).翻看同系列文章,直接到文章最底部. 制作一个图标集所需全部信息上次我们介绍了我将 ...
python调用报表制作工具_Python如何使用xlwt制作一个表格
Python如何使用xlwt制作一个表格发布时间:2020-11-06 15:23:50 来源:亿速云阅读:59 Python如何使用xlwt制作一个表格?很多新手对此不是很清楚,为了帮助大家解决 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
python输入学号姓名输出自我介绍_请编写一个程序,使用字典存储学生信息,学生信息包括学号和姓名,请根据学生学号从小到大输出学生信息。_学小易找答案...
[单选题]维持人体直立姿势的重要肌 [选择题]2. 对尿失禁患者的护理中错误的一项是( ) [简答题]你印象最深的一处旅游景点是哪里?给你印象深刻的地方在于?有我们的民俗文化元素吗? [判断题]中间继 ...
用VUE制作一个表格
好的,我来给你介绍一下如何使用 Vue.js 制作一个表格. 首先,你需要在 HTML 中创建一个表格标签,然后使用 Vue 的指令来渲染表格的内容. 例如,你可以使用 v-for 指令来循环遍历数据 ...
从控制台输入一个数字表示某个班学生人数，然后创建一个表示该班级所有学生名字的字符串数组，并使用控制台输入学生名字赋值给数组的每一个元素，最后输出所有学生姓名。
Java控制台输入字符存储在数组中题目:** 从控制台输入一个数字表示某个班学生人数,然后创建一个表示该班级所有学生名字的字符串数组,并使用控制台输入学生名字赋值给数组的每一个元素,最后输出所有学生 ...
c读取txt文件内容并建立一个链表_C++链表实现学生信息管理系统
可以增删查改,使用链表存储,支持排序以及文件存储及数据读取,基本可以应付期末大作业(狗头) 界面为源代码为一个main.cpp和三个头文件,具体为 main.cpp #include <ios ...

制作一个表格，显示班级的学生信息。

编程练习

制作一个表格，显示班级的学生信息。相关推荐

最新文章

热门文章