JavaScript 事件练习（表格全选） December 25，2019

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        th,td{
            text-align: center;
            border: 1px solid;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        div{
            text-align: center;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr >
            <td><input type="checkbox" name="cb" id = "firstCb"></td>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>伍六七</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>2</td>
            <td>梅花十三</td>
            <td>女</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>3</td>
            <td>清风</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>
    <div>
        <input type="button" id ="selectAll" value="全选">
        <input type="button" id ="unSelectAll" value="全不选">
        <input type="button" id ="selectRev" value="反选">
    </div>
<script>
    function delTr(obj){
        var parentNode = obj.parentNode.parentNode.parentNode;
        var parentNode1 = obj.parentNode.parentNode;
        parentNode.removeChild(parentNode1);
    }
    //1.设置页面加载完成后绑定事件
    window.onload = function () {
        //2.给全选绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i <cbs.length ; i++) {
                cbs[i].checked = true;
            }
        }
        //3.给全不选绑定单击事件
        document.getElementById("unSelectAll").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i <cbs.length ; i++) {
                cbs[i].checked = false;
            }
        }
        //4.给反选绑定单击事件
        document.getElementById("selectRev").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i <cbs.length ; i++) {
                cbs[i].checked = !cbs[i].checked;
            }
        }

        //5.
        document.getElementById("firstCb").onclick = function () {
            var cbs = document.getElementsByName("cb");
            var flag = cbs[0].checked;
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = flag;
            }
            /*
             var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = this.checked;
            */
        }
        //6.给所有tr绑定鼠标移到元素之上与移出元素事件
        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }
    }
</script>
</body>
</html>
JavaScript 事件练习（表格全选） December 25，2019

猜你喜欢
