html 输出复选框未隐藏的行数据

最新推荐文章于 2023-11-04 15:34:16 发布
原创最新推荐文章于 2023-11-04 15:34:16 发布 · 246 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
标签
#html #javascript #前端
该代码示例展示了如何使用JavaScript和jQuery处理HTML表格中的复选框，包括全选、全不选、反选功能，以及显示选中行的值。此外，还有对表格行的鼠标悬停效果和复选框的显示隐藏操作。
点击显示按钮，看打印结果
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
 
        td,
        th {
            text-align: center;
            border: 1px solid;
        }
 
        div {
            margin-top: 10px;
            margin-left: 30%;
        }
 
        .out {
            background-color: white;
        }
 
        .over {
            background-color: pink;
        }
        .hide {
            display: none;
        }
        .show {
            display: inline-block;
        }
    </style>
    <!-- <script src="js/jquery-3.3.1.js"></script> -->
    <script src="jquery-1.2.6.js"></script>
    <script>
        /*
          分析：
              1.全选：
                  * 获取所有的checkbox
                  * 遍历cb，设置每一个cb的状态为选中  checked
  
         */
 
 
        //1.在页面加载完后绑定事件
        window.onload = function () {
            
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为选中  checked
                    cbs[i].checked = true;
                }
                cbs = $("input[type=checkbox]:checked");
                console.log(cbs.length);
                $("input[type=checkbox]").each(function(num,item){
                    
                    var index = num;
                    var isSelect = $("input[type=checkbox]").eq(index).attr("checked") + '';
                    console.log(index, isSelect);
                })
            }
 
            document.getElementById("unSelectAll").onclick = function () {
                //全不选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为未选中  checked
                    cbs[i].checked = false;
                }
            }
 
            document.getElementById("selectRev").onclick = function () {
                //反选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为相反
                    cbs[i].checked = !cbs[i].checked;
                }
            }
 
            document.getElementById("showSelect").onclick = function () {
                //显示选中行的值
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    if (cbs[i].checked) {
                        //3.获取checkbox的父节点（当前行tr）
                        tri = cbs[i].parentNode.parentNode
                        console.log(tri.innerHTML)
                        //4.获取当前行所有的子元素
                        tds = tri.children
                        console.log(tds.length)
                        //5.获取当前行所有子元素的值，第一个子元素是复选框
                        //所以循环从1开始
                        for (var i = 1; i < tds.length; i++) {
                            console.log(tds[i].innerHTML)
                        }
                    }
                }
            }

            document.getElementById("operateCheckbox").onclick = function () {
                var cbs = document.getElementsByName("checkbox");
                console.log(false + '')
                $("input[type=checkbox]").each(function(num,item){
                    if (num == 1) {
                        if (item.className == "hide") {
                            item.className = "show"
                        }
                        else {
                            item.className = "hide"
                        }
                    }
                })
            }
            
            function cgf_all() {
                var paramsArr=[];
                var cbs = $("input[type=checkbox]");
                console.log(cbs.length);
                if (cbs.length == 2 && cbs[1].className != "hide") { // 当前表格只有一行数据，加上首行的复选框 值为2
                    var isSelect = cbs.eq(1).attr("checked") + '';
                    //获取checkbox的父节点（当前行tr）
                    tri = cbs[1].parentNode.parentNode
                    //获取当前行所有的子元素
                    tds = tri.children
                    //获取当前行所有子元素的值，第一个子元素是复选框
                    //所以循环从1开始
                    for (var i = 1; i < tds.length - 1; i++) {
                        console.log(tds[i].innerHTML)
                    }
                    id = tds[1].innerHTML;
                    name = tds[2].innerHTML;
                    sex = tds[3].innerHTML;
                    var params1 = {
                        // 在这里增加其他数据
                        "name": name,
                        "sex": sex,
                        "id": id,
                        "isSelect": isSelect
                    };
                    paramsArr.push(params1);
                } else {
                    for (var i = 1; i < cbs.length; i++) {
                        if (cbs[i].className != "hide") {   // 跳过 隐藏的复选框所在行
                            var isSelect = cbs.eq(i).attr("checked") + '';
                            //获取checkbox的父节点（当前行tr）
                            tri = cbs[i].parentNode.parentNode
                            //获取当前行所有的子元素
                            tds = tri.children
                            //获取当前行所有子元素的值，第一个子元素是复选框
                            //所以循环从1开始
                            for (var j = 1; j < tds.length - 1; j++) {
                                console.log(tds[j].innerHTML)
                            }
                            id = tds[1].innerHTML;
                            name = tds[2].innerHTML;
                            sex = tds[3].innerHTML;
                            var params2 = {
                                // 在这里增加其他数据
                                "name": name,
                                "sex": sex,
                                "id": id,
                                "isSelect": isSelect
                            };
                            paramsArr.push(params2);
                        }
                    }
                }
                if (paramsArr.length == 0) {
                    alert("paramsArr 为空！！")
                }
                return paramsArr;
            }

            function cgf_selected(data_all) {
                var paramsArr=[];
                var paramsAll=data_all;
                for (j=0;j<paramsAll.length;j++) {
                    item = paramsAll[j];
                    if (item.isSelect == true || item.isSelect == 'true' ) {
                        paramsArr.push(item);
                    }
                }
                return paramsArr;
            }

            function test() {
                data_all = cgf_all();
                data_selected = cgf_selected(data_all)
                if (data_selected.length == 0) {
                    return data_all;
                }
                return data_selected;
            }

            document.getElementById("showRow").onclick = function () {
                var paramsArr = test();
                console.log(paramsArr);
            }
 
            document.getElementById("firstCb").onclick = function () {
                //第一个cb点击
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //获取第一个cb
 
                //2.遍历
                   for (var i = 0; i < cbs.length; i++) {
                       //3.设置每一个cb的状态和第一个cb的状态一样
                       cbs[i].checked =  this.checked;
                   }
            }
            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //2.遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
 
                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
 
            }
 
            // $("input[type=checkbox][name=checkbox]").eq(1).css('display','none')
            // $("input[type=checkbox][name=checkbox]").eq(1).attr('style','display: none;');
        }
        
        function func(item) {
            console.log(item.checked)
        }
    </script>
 
</head>
 
<body>
 
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="Checkbox" id="firstCb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox" class="hide"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>3</td>
            <td>任盈盈</td>
            <td>女</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
        <input type="button" id="showSelect" value="显示选中行的值">
        <input type="button" id="operateCheckbox" value="操作复选框">
        <input type="button" id="showRow" value="显示">
    </div>
</body>
 
</html>