master

分支 (1)

管理

管理

master

jquery_framework_learning
/
jq-在表格中应用.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="JQuery-js文件/jquery-3.3.1.js"></script>
        <script type="text/javascript">
              window.onload = main;
            function main(){
                $(":checkbox:first").click(fun1);
                $(":checkbox:gt(0)").click(fun2);
                $(":table tr:gt(0)").mouseover(fun3);
                $(":table tr:gt(0)").mouseout(fun4);

            }
            function fun1(){
               var flag =  $(":checkbox:first").prop("checked");
               $(":checkbox:gt(0)").prop("checked",flag);
            }
            function fun2(){
                 var ckNum = $(":checkbox:gt(0)").length;
                 var checkedNum =  $(":checkbox:gt(0):checked:").length;
                 if(ckNum == checkedNum){
                    $(":checkbox:first").prop("checked",true);
                 }else{
                    $(":checkbox:first").prop("checked",false);
                 }
            }
            function fun3(){
                //this：鼠标悬停的tr标签
                $(this).css("background-color","red");
            }
            function fun4(){
                //this：鼠标悬停的tr标签
                $(this).css("background-color","white");
            }

        </script>

        <body>

            <center>
                <table border="2">
                    <tr>
                        <td>职员姓名</td>
                        <td>职员职位</td>
                        <td>职员工资</td>
                        <td><input type="checkbox">全选与全不选
                        <input type="button" value="删除" onclick="fun1();"/> </td>
                    </tr>
                    <tr>
                        <td>allen</td>
                        <td>高级工程师</td>
                        <td>20000</td>
                        <td><input type="checkbox"></td>
                    </tr>
                    <tr>
                            <td>allen</td>
                            <td>高级工程师</td>
                            <td>20000</td>
                            <td><input type="checkbox"></td>
                        </tr>
                        <tr>
                                <td>allen</td>
                                <td>高级工程师</td>
                                <td>20000</td>
                                <td><input type="checkbox"></td>
                            </tr>
                </table>
            </center>

        </body>
    </head>
</html>