制作一个表格，显示班级的学生信息——javascript（慕课网js进阶篇9-22）

编程练习

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

要求：

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= changeColor;
                row[i].onmouseout= function () {
                    this.style.background="white";
                };
                };



            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。




        }
        function changeColor(){
           this.style.background="red";
        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function add(){
            var newAddNode=document.getElementById("table");
            var tr=document.createElement("tr");
            tr.onmouseover=changeColor;
             tr.onmouseout= function () {
               this.style.background = "white";
           }
            tr.innerHTML='<td>01</td><td>王小明</td> <td><a href="javascript:;"onclick="shanchu(this)" >删除</a></td> ';
            newAddNode.appendChild(tr);


     }


        // 创建删除函数
   function shanchu(obj) {

       var delNode=obj.parentNode.parentNode;
       //alert(delNode);
       var undelNode=delNode.parentNode;
       undelNode.removeChild(delNode);
   }


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

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

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

其实我认为如果用jQuery写的话也许会更简单，但是考虑到有些小可爱们可能还没学习到jquery，所以就没有用jquery，不过jquery我会很快贴出来的。

还有我的add（）函数里面的onmouseover的函数应该还可以更简单一些，但是小菜鸡如我已经不想改了，大家有兴趣的可以试一试，把代码合到一起会更短哦。

还有添加一行我添加的都是一个东西，有兴趣的小伙伴们亦可以自己进行改良哦！

制作一个表格，显示班级的学生信息——javascript（慕课网js进阶篇9-22）

编程练习

猜你喜欢