编程练习-js操作table-原创手记-慕课网

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程练习5-js操作表格</title>
    <style type="text/css">
        .backgroundColor{
            background-color: #f2f2f2;
        }
    </style>
    <script type="text/javascript"> 
          function setBgColor(){
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         // 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
          var table = document.getElementById('table');
          var trs = document.getElementsByTagName('tr');
          for (var i = 0; i < trs.length; i++) {(function(obj,i){
                 obj.onmouseover = function(){
                    //table.rows[i].bgColor = "#f2f2f2";
                    obj.setAttribute("class","backgroundColor");
                 }
                 obj.onmouseout = function(){
                    //table.rows[i].bgColor = "#fff";
                    obj.removeAttribute("class");
                 }
          })(trs[i],i)
            }  
          }
          window.onload = function(){     
             setBgColor();
         }

          // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
         function add() {
            var trE = document.createElement("tr");
            for (var i = 0; i < 3; i++) {
                    var td = document.createElement("td");
                    if(i==2){
                        debugger;
                      td.innerHTML = '<a href="javascript:void(0);" onclick="del(this)">删除</a>';
                    }
                    trE.appendChild(td);
                }
            document.getElementsByTagName('tbody')[0].appendChild(trE);
            setBgColor();
         }

         // 创建删除函数
         function del(aNode) {
            debugger;
            document.getElementsByTagName('tbody')[0].removeChild(aNode.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:void(0);" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
           </tr>

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

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