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

413 查看
制作一个表格，显示班级的学生信息。
要求：
鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
点击添加按钮，能动态在最后添加一行
点击删除按钮，则删除当前行
<!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(){

 // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
 var tr = document.getElementsByTagName("tr");
 for(var i = 0 ; i < tr.length; i++){
    //添加鼠标滑过事件
    tr[i].setAttribute("onmouseover","mOver(this)"); 
    //添加鼠标离开事件
    tr[i].setAttribute("onmouseout","mOut(this)"); 
 }     

 }
 //鼠标滑过
 function mOver(obj){
    obj.setAttribute("style","background-color:#f2f2f2"); 
 }

  //鼠标离开
 function mOut(obj){
    obj.setAttribute("style","background-color:#fff"); 
 }

  // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
 function addTr(){
     //获得table标签
     var tb = document.getElementById("table");

     //创建一个tr标签
     var tr = document.createElement("tr");

     //添加鼠标滑过事件
     tr.setAttribute("onmouseover","mOver(this)"); 

     //添加鼠标离开事件
     tr.setAttribute("onmouseout","mOut(this)");      

     //获得表头标签数组
     var ths = document.getElementsByTagName("th");

     //一行添加ths.length列
     for(var i = 0; i < ths.length; i++){ 
        //创建td标签
        var td= document.createElement("td");
        //最后一列单元格内容是"删除"
        if(i==ths.length-1){
          //创建a标签
          var a = document.createElement("a");
          //设置a标签的href属性
          a.setAttribute("href","javascript:;");
          //添加鼠标点击事件
          a.setAttribute("onclick","removeTr(this)");
          //设置a标签的文本内容
          a.innerHTML="删除";
          //最后一列td加a标签
          td.appendChild(a);
        }

        //设置行高
        //td.height="20px";
        //添加td标签
        tr.appendChild(td);
     }
     //表在末尾添加一行
     tb.appendChild(tr);

 }

 // 创建删除函数
 function removeTr(obj){
    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
 }

</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="removeTr(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>

   <tr>
    <td>xh002</td>
    <td>刘小芳</td>
    <td><a href="javascript:" onclick="removeTr(this)">删除</a></td>  <!--在删除按钮上添加点击事件  -->
   </tr>  

   </table>
   <input type="button" value="添加一行"  onclick="addTr()"/>   <!--在添加按钮上添加点击事件  -->
</body>
</html>