高亮显示+删除

最新推荐文章于 2022-02-25 01:12:24 发布

Gemini_骑士

最新推荐文章于 2022-02-25 01:12:24 发布

阅读量375

点赞数

文章标签： angular jquery

本文链接：https://blog.csdn.net/qq_39923392/article/details/78492743

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        /*使用在线js包的情况下需要写jquery 和angular的js包*/
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <script>
           $(document).ready(function(){
                //更改背景
           $("tbody tr:odd").css("background-color","red");
           $("tbody tr:even").css("background-color","greenyellow");
             var a="";
            $("tbody tr").mouseenter(function(){
                a= $(this).css("background-color")
                $(this).css("background-color","#EE82EE");

            });
        /*,function(){

       $("tbody tr:odd").css("background-color","red");
       $("tbody tr:even").css("background-color","greenyellow");
        });*/

        $("tbody tr").mouseleave(function(){
            $(this).css("background-color",a);
        })
        /*判断表格中是否有东西 如果没有的话将表格隐藏*/
        $("button").click(function(){
            $(this).parent().parent().remove();
                  var se=$("tbody").children("tr");
           console.log(se.length);
       if (se.length==0){

            $("table")[0].style.display="none";
        }

        });     
    });


    </script>



    </head>
    <body>
        <table border="1" style="text-align: center; width: 600px;">
            <thead>
            <tr><td>姓名：</td>
                <td>年龄：</td>
                <td>性别：</td>
                <td>操作：</td>
            </thead>
            <tbody>
            </tr>
            <tr><td>张三</td>
                <td>15</td>
                <td>男</td>
                <td><button>删除</button></td>

            </tr>
            <tr><td>李四</td>
                <td>16</td>
                <td>女</td>
                <td><button>删除</button></td>

            </tr>
            <tr><td>王五</td>
                <td>18</td>
                <td>女</td>
                <td><button>删除</button></td>

            </tr>
            <tr><td>赵六</td>
                <td>10</td>
                <td>女</td>
                <td><button>删除</button></td>

            </tr>
            </tbody>
        </table>

    </body>
</html>

Gemini_骑士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高亮显示+删除

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> /*使用在线js包的情况下需要写jquery 和angular的js包*/ <script src="http://cdn.static.runoob.com/libs/jquery/1.
复制链接

扫一扫