制作一个表格，显示班级的学生信息。-原创手记-慕课网

<!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-1;i++){
        changeBC(tr[i]);
    }

  }

  function changeBC(obj){
    console.log("1234");
    obj.onmouseover = function(){
        obj.style.backgroundColor = "#f2f2f2";
    }
    obj.onmouseout = function(){
        obj.style.backgroundColor = "#fff";
    }
  }

 var num = 2;
  // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
 function add(){
    num++;
    var newNode = document.createElement("tr");
    var xh= document.createElement("td");
    if(num<10){
        xh.innerHTML = "xh" +"00" +num; 
    }else if(10<=num<99){
        xh.innerHTML = "xh" +"0" +num;  
    }else{
        xh.innerHTML = "xh"  +num;  
    }
    var xm = document.createElement("td");
    xm.innerHTML = "第"+num+"学生";
    var cz = document.createElement("td");      
    cz.innerHTML = "<a href='javascript:;' onclick='del(this)' >删除</a>";
    var table=document.getElementById("table");
    table.appendChild(newNode);
    newNode.appendChild(xh);
    newNode.appendChild(xm);
    newNode.appendChild(cz);
    var tr = document.getElementsByTagName("tr");
    for(var i =0;i<=tr.length-1;i++){
        changeBC(tr[i]);
    }
 // 创建删除函数
 }

 function del(obj){
    var demo = obj.parentNode.parentNode;
    demo.parentNode.removeChild(demo);
 }

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

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

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

</body>
</html>