表格实现选框全选、全不选、反选操作并完成每行鼠标移进移出变色操作:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>动态表格</title> 
    <style> 
        table{ 
            border: 1px solid red; 
            margin: auto; 
            width: 500px; 
        } 
        td,th{ 
            text-align: center; 
            border: 1px solid; 
        } 
        #one{ 
            text-align: center; 
            margin: 50px; 
        } 
        #two{ 
            margin-top: 10px; 
            margin-left: 30%; 
        } 
        .out{ 
            background-color: white; 
        } 
        .over{ 
            background-color: pink; 
        } 
    </style> 
</head> 
<body> 
    <div id="one"> 
        <input type="text" id="id" placeholder="请输入编号"> 
        <input type="text" id="name" placeholder="请输入姓名"> 
        <input type="text" id="gender" placeholder="请输入性别"> 
        <input type="button" id="btn_add" value="添加"> 
    </div> 
    <table> 
        <caption>学生信息表</caption> 
        <tr> 
            <td><input type="checkbox" id="zhengfan"></td> 
            <td>编号</td> 
            <td>姓名</td> 
            <td>性别</td> 
            <td>操作</td> 
        </tr> 
 
        <tr> 
            <td><input type="checkbox" name="cb"></td> 
            <td>1</td> 
            <td>张三</td> 
            <td>男</td> 
            <td><a href="javascrpt: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="javascrpt: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="javascrpt:void(0)" onclick="delTr(this);">删除</a></td> 
        </tr> 
    </table> 
 
    <div id="two"> 
        <input type="button" id="selectAll" value="全选"> 
        <input type="button" id="unSelectAll" value="全不选"> 
        <input type="button" id="selectRev" value="反选"> 
    </div> 
    <script> 
        //使用innerHTML添加 
        document.getElementById("btn_add").onclick = function () { 
            //2.获取文本框的内容 
            var id = document.getElementById("id").value; 
            var name = document.getElementById("name").value; 
            var gender = document.getElementById("gender").value; 
 
            //获取table 
            var table = document.getElementsByTagName("table")[0]; 
 
            //追加一行 
            table.innerHTML += "<tr>\n" + 
                "            <td><input type=\"checkbox\" name=\"cb\"></td>\n" + 
                "            <td>"+id+"</td>\n" + 
                "            <td>"+name+"</td>\n" + 
                "            <td>"+gender+"</td>\n" + 
                "            <td><a href=\"javascrpt:void(0)\" onclick=\"delTr(this);\">删除</a></td>\n" + 
                "        </tr>"; 
        } 
        //删除方法 
        function delTr(obj) { 
            var table = obj.parentNode.parentNode.parentNode; 
            var tr = obj.parentNode.parentNode; 
            table.removeChild(tr); 
        } 
 
 
        /* 
            分析: 
                1.全选 
                    获取所有的CheckBox 
                    遍历cb,设置每一个cb的状态为选中 checked 
         */ 
 
        //在页面加载完之后绑定事件 
        window.onload = function () { 
            //给全选按钮绑定单击事件 
            document.getElementById("selectAll").onclick = function () { 
                //全选 
                //获取所有的checkbox 
                var cbs = document.getElementsByName("cb"); 
                //遍历 
                for (var i = 0; i < cbs.length; i++) { 
                    //设置每一个人cb的状态为选中 checked 
                    cbs[i].checked = true; 
                } 
            } 
 
            //给全不选按钮绑定单击事件 
            document.getElementById("unSelectAll").onclick = function () { 
                //全部不选 
                //获取所有的checkbox 
                var cbs = document.getElementsByName("cb"); 
                //遍历 
                for (var i = 0; i < cbs.length; i++) { 
                    //设置每一个人cb的状态为不选中 checked 
                    cbs[i].checked = false; 
                } 
            } 
 
            //给反选按钮绑定单击事件 
            document.getElementById("selectRev").onclick = function () { 
                //反选 
                //获取所有的checkbox 
                var cbs = document.getElementsByName("cb"); 
                //遍历 
                for (var i = 0; i < cbs.length; i++) { 
                    //设置每一个人cb的状态为相反 
                    cbs[i].checked =! cbs[i].checked; 
                } 
            } 
 
            //正反选 
            document.getElementById("zhengfan").onclick = function () { 
                //正反选 
                //获取所有的checkbox 
                var cbs = document.getElementsByName("cb"); 
                //遍历 
                for (var i = 0; i < cbs.length; i++) { 
                    //设置每一个人cb的状态为和第一个选框的状态一样 
                    cbs[i].checked = this.checked; 
                } 
            } 
 
            //给所有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>

由于博主脑子有坑 添加新行之后 不能实现变色及正负选功能

但 全选、全不选、反选均可使用

待博主后续学习之后更新完善此博文bug


发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JavaScript>响应式布局与CSS样式和JS插件(轮播图)的使用方法讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。