基于JavaScript的表格设计：按序添加或删除班级的学生信息
目的：
制作一个表格，显示班级的学生信息
功能：
鼠标移到不同行，背景色发生改变，离开恢复原背景色
添加、删除按钮，可添加，可删除。
程序流程：
首先先建立绑定事件函数。
其次建立鼠标移动改变背景色函数。
再编写添加行和列函数。
最后编写删除函数。
HTML部分：
<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:;" >删除</a></td> </tr > <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" >删除</a></td> </tr> </table> <input type="button" value="添加一行" onclick="add()" />
JS部分：
绑定事件函数：
window.onload = function() { var tr=document.getElementsByTagName("tr")//获取所有表格的行标签，得到一个tr数组 for(var i=0;i<tr.length;i++) { bgcChange(tr[i]); //对每一个tr执行一个绑定事件 } // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景 }
改变背景色函数：
function bgcChange(obj) { obj.onmouseover=function() { obj.style.backgroundColor="#f2f2f2";//当鼠标覆盖时，改背景色为#f2f2f2 } obj.onmouseout=function() { obj.style.backgroundColor="#fff";//当鼠标离开时，恢复背景色 } }
添加行和列函数：
var num=2; function add() { num++; var tr=document.createElement("tr");//num每加一次建立一个行标签，存在tr数组里面 var xh=document.createElement("td");//num每加一次建立一个列标签，存在xh数组里面 var xm=document.createElement("td");//num每加一次建立一个列标签，存在xm数组里面 xh.innerHTML="xh00"+num; // 给学号列添加元素内容xh00num xm.innerHTML="学生"+num;//给姓名列添加元素内容第num学生 var del=document.createElement("td");//num每加一次，建立一个列标签，存在del数组里面 del.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>"; //给第三列添加删除列 var tab=document.getElementById("table"); //获取id=table的元素 存放在tab数组里面 tab.appendChild(tr); //向id=table的元素添加子节点，节点对象为tr tr.appendChild(xh); //在添加行的同时，也添加学号列 tr.appendChild(xm); //在添加行的同时也添加姓名列 tr.appendChild(del); //在添加行的同时也添加删除列 var tr=document.getElementsByTagName("tr"); //获取所有表格的行标签，得到一个tr数组 for(var i=0;i<tr.length;i++) { bgcChange(tr[i]); //循环 对每一个行标签执行一个绑定事件 } }
删除函数：
function del(obj) //obj是函数调用时的this this指的是<a>不是<td>,等于说obj指的是<a>,所以obj.parentNode.parentNode 是<tr> 然后tr.parentNode.removeChild(tr)是<table> 然后再removeChild(tr) 就是<table>移除<tr>. { var tr=obj.parentNode.parentNode; tr.parentNode.removeChild(tr); }
