增加、删除函数增加、删除函数-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style type="text/css">
table tr{
text-align:center;
}
</style>
<script type="text/javascript">

  window.onload = function(){

 // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    var t=document.getElementsByTagName("tr");
  for(var i=0;i<t.length;i++) {
      bgRow(t[i]);
  }     

 }

 function bgRow(obj){
     obj.onmouseover=function() {
         this.style.backgroundColor="#f2f2f2";
      }
      obj.onmouseout=function() {
          this.style.backgroundColor="#fff";
      }
 }
  // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
  var num =0;
function addTr(){
     num++;
     var a = document.getElementById("table");
     var newRow=document.createElement("tr");
     newRow.innerHTML='<td>'+'xh00'+num+'</td>'+'<td>'+'第'+num+'个人'+'</td>'+'<td><a href=javascript:;  onclick="deleteTr(this)">删除</a></td>';
     bgRow(newRow);
     a.appendChild(newRow);
 }

 // 创建删除函数
 function deleteTr(obj){
     var tr=obj.parentNode.parentNode;
     //document.write(tr);
     tr.parentNode.removeChild(tr);
 }

</script>
</head>
<body>
<table border="1" width="70%" id="table">
<tr class="trclass">
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>

   <tr>
    <td>xh001</td>
    <td>王小明</td>
    <td><a href="javascript:;" onclick="deleteTr(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>

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

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

</body>
</html>