制作一个表格，显示班级的学生信息
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作一个表格，显示班级的学生信息相关的知识，希望对你有一定的参考价值。
要求：
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.onmouseover=function(){ 25 obj.style.backgroundColor="#f2f2f2"; 26 } 27 obj.onmouseout=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:;‘ onclick=‘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:;"onclick="del(this);" >删除</a></td> <!--在删除按钮上添加点击事件 --> 78 </tr> 79 80 <tr> 81 <td>xh002</td> 82 <td>刘小芳</td> 83 <td><a href="javascript:;" onclick="del(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> 84 </tr> 85 86 </table> 87 <input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 --> 88 </body> 89 </html>
以上是关于制作一个表格，显示班级的学生信息的主要内容，如果未能解决你的问题，请参考以下文章