制作一个表格，显示班级的学生信息——javascript（用jquery）实现

这个是使用jquery实现的哦，强烈推荐用jquery，因为是真的好用！！！

编程练习

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

要求：

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

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

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

代码：

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <!--<script src="jquery-3.2.1.min.js"></script>-->
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">

        window.onload = function(){
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            $("tr").mouseover(function () {
                $(this).css("background", "red");

                })
            $('tr').mouseout(function () {
                $(this).css("background","white");
            })

            }




        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
       function add() {
            $new=  $('<tr class="1"><td>01</td><td>小樱</td><td><a href="javascript:;" onclick=del(this)>删除</a></td> ');
              $new.appendTo($('#table'));
              $new.mouseover(function () {
                  $(this).css("background","red");
              })
           $new.mouseout(function () {
               $(this).css("background","white");
           })


       }



        // 创建删除函数
    function del(obj) {
      $(obj).parent().parent().remove();
    }


    </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>

制作一个表格，显示班级的学生信息——javascript（用jquery）实现

这个是使用jquery实现的哦，强烈推荐用jquery，因为是真的好用！！！

编程练习

猜你喜欢