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

要求：

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

3. 点击删除按钮，则删除当前行

<!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 row=document.getElementsByTagName("tr");
    // for(var i=0;i<row.length;i++){
    //     row[i].onmouseover=function(){
 //        this.style.background="#f2f2f2";
    //     }
    //     row[i].onmouseout=function(){
 //        this.style.background="#fff";
    //     }
    //  }
 //    }
 //
    var table = document.getElementById("table");
    table.onmouseover = function(event) {
        var event = event || window.event;
        var target = event.target || event.srcElement;
        var nodeName = target.nodeName.toLowerCase();
        var node = target; // row

        if (nodeName == 'td' || nodeName == 'th') {
            node = node.parentNode;
        }


        if (node.nodeName.toLowerCase() == 'tr'){
            node.style.background="#f2f2f2";
        }
    };

    table.onmouseout = function(event) {
        var event = event || window.event;
        var target = event.target || event.srcElement;
        var nodeName = target.nodeName.toLowerCase();
        var node = target; // row

        if (nodeName == 'td' || nodeName == 'th') {
            node = node.parentNode;
        }


        if (node.nodeName.toLowerCase() == 'tr'){
            node.style.background="#fff";
        }
    };
}

    function addLine(){
        //获取表格的节点
        var tab=document.getElementById("table");
        var tbody = tab.getElementsByTagName('tbody')[0];

        //新建一个行节点
        var newRow=document.createElement("tr");

        //新建一个表格框节点
        var newStuNum=document.createElement("td");
        newStuNum.innerHTML="xh003";
        var newStuName=document.createElement("td");
        newStuName.innerHTML="小花";
        var newOpe=document.createElement("td");
        var newOpeChildNode=document.createElement("a");
        newOpeChildNode.innerHTML="删除";
        newOpeChildNode.href="javascript:;";
        newOpeChildNode.setAttribute("onclick","del(this)");

        // alert(newOpeChildNode);
        //将链接节点添加到操作按钮节点
        newOpe.appendChild(newOpeChildNode);

        //将表格框添加到行节点
        newRow.appendChild(newStuNum);
        newRow.appendChild(newStuName);
        newRow.appendChild(newOpe);

        //将行节点添加到表格节点中
        tbody.appendChild(newRow);
    }


     // 创建删除函数
    function del(obj){
        var theRow=obj.parentNode.parentNode;
        theRow.parentNode.removeChild(theRow);
    }

  </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="addLine()" onclick="addLine()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

 

posted @ 2018-11-28 11:02  pretend_smile  阅读(247)  评论(0)    收藏  举报