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

最新推荐文章于 2022-03-31 11:11:12 发布

awan8718

最新推荐文章于 2022-03-31 11:11:12 发布

阅读量473

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/Lwei/p/5223060.html

版权

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

要求：

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

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

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

任务

第一步：首先，我们创建删除函数，并在删除按钮上添加点击事件；

提示: 使用removeChild()。

第二步：编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

提示: 使用createElement()、innerHTML、appendChild()。

第三步：更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4   <title> new document </title>  
 5   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
 6   <script type="text/javascript"> 
 7   
 8       window.onload = function(){
 9                   
10      // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
11             var tr=document.getElementsByTagName("tr");
12           for(var i= 0;i<tr.length;i++)
13           {
14               bgcChange(tr[i]);
15           } 
16         
17      
18      
19      }
20      
21       // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
22           function bgcChange(obj)
23      {
24         obj.οnmοuseοver=function(){
25             obj.style.backgroundColor="#f2f2f2";
26         }
27         obj.οnmοuseοut=function(){
28             obj.style.backgroundColor="#fff";
29         }
30      }
31             
32         
33      // 创建删除函数
34       var num=2;
35      function add(){
36         num++;
37         var tr=document.createElement("tr");
38         var xh=document.createElement("td");
39         var xm=document.createElement("td");
40         xh.innerHTML="xh00"+num;
41         xm.innerHTML="第"+num+"学生";
42         var del=document.createElement("td");
43         del.innerHTML="<a href='javascript:;' οnclick='del(this)' >删除</a>";
44         var tab=document.getElementById("table");
45         tab.appendChild(tr);
46         tr.appendChild(xh);
47         tr.appendChild(xm);
48         tr.appendChild(del);
49         var tr = document.getElementsByTagName("tr");
50           for(var i= 0;i<tr.length;i++)
51           {
52               bgcChange(tr[i]);
53           }
54      }
55       function del(obj)
56      {
57          var tr=obj.parentNode.parentNode;
58          tr.parentNode.removeChild(tr);
59      }
60      
61      
62 
63 
64   </script> 
65  </head> 
66  <body> 
67        <table border="1" width="50%" id="table">
68        <tr>
69         <th>学号</th>
70         <th>姓名</th>
71         <th>操作</th>
72        </tr>  
73 
74        <tr>
75         <td>xh001</td>
76         <td>王小明</td>
77         <td><a href="javascript:;"οnclick="del(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
78        </tr>
79 
80        <tr>
81         <td>xh002</td>
82         <td>刘小芳</td>
83         <td><a href="javascript:;" οnclick="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
84        </tr>  
85 
86        </table>
87        <input type="button" value="添加一行"  οnclick="add()" />   <!--在添加按钮上添加点击事件  -->
88  </body>
89 </html>

posted on 2016-02-27 16:14 一人行者阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/Lwei/p/5223060.html

awan8718

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
制作一个表格，显示班级的学生信息

制作一个表格，显示班级的学生信息要求：1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff2. 点击添加按钮，能动态在最后添加一行3. 点击删除按钮，则删除当前行任务第一步：首先，我们创建删除函数，并...
复制链接

扫一扫