bootstrap 框架中 jquery对表的操作 1

雪舞芷境

于 2019-09-28 11:09:50 发布

阅读量175

点赞数

分类专栏： jquery 与 js 知识文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44129913/article/details/101601877

版权

jquery 与 js 知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表格结构：

1.HTML代码

<body>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <table id="tb" class="table table-bordered table-hover">
                    <tr class="active">
                        <th> <input type="checkbox" class="box1" /> </th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                    <tr class="success">
                        <td class="in"> <input type="checkbox" class="box" /> </td>
                        <td class="name">陈涛</td>
                        <td class="age">18</td>
                        <td><a href="#" class="del">删除内容</a>&nbsp;<a href="#" class="update">修改内容</a>&nbsp;<a href="#" class="delete">刪除整行</a></td>
                    </tr>
                    <tr class="warning">
                        <td class="in"> <input type="checkbox" class="box" /> </td>
                        <td class="name">李杨</td>
                        <td class="age">19</td>
                        <td> <a href="#" class="del">删除内容</a>&nbsp;<a href="#" class="update">修改内容</a>&nbsp;<a href="#" class="delete">刪除整行</a> </td>
                    </tr>
                    <tr class="danger">
                        <td class="in"> <input type="checkbox" class="box" /> </td>
                        <td class="name">王虎</td>
                        <td class="age">20</td>
                        <td><a href="#" class="del">删除内容</a>&nbsp;<a href="#" class="update">修改内容</a>&nbsp;<a href="#" class="delete">刪除整行</a></td>
                    </tr>
                    <tr class="info">
                        <td class="in"> <input type="checkbox" class="box" /> </td>
                        <td class="name">徐飘</td>
                        <td class="age">20</td>
                        <td><a href="#" class="del">删除内容</a>&nbsp;<a href="#" class="update">修改内容</a>&nbsp;<a href="#" class="delete">刪除整行</a></td>
                    </tr>
                    <div >
                     <tr class="active" id="btn">
                         <td>选项</td>
                         <td> <input type="button" id="btn4" value="查询" /></td>
                         <td> <input type="button" id="btn0" value="添加" /></td>
                         <td>
                            
                             <input type="button" id="btn1" value="全选" />
                             <input type="button" id="btn2" value="反选" />
                             <input type="button" id="btn3" value="全不选" />
                        </td>
                     </tr>   
                    </div>
                    </table>
            </div>
        </div>
    </body>

2. 页面效果

在这里插入图片描述
主要功能有：
点击全选，所有checkbox的状态为：checked属性为false；
点击全不选，所有checkbox的状态为：checked属性为true；
点击反选，checkbox的状态取反，而且需要单独判断，最上面的checkbox，
点击最上面的checkbox，下面的checkbox全选或者全不选。

3.事件绑定

3.1 全选事件

 $("#btn1").on("click", function() {
                    $("input[type='checkbox']").prop("checked", true);
                });

3.2 全不选事件

   $("#btn3").on("click", function() {
                    $("input[type='checkbox']").prop("checked", false);
                });

3.3 反选事件

  $("#btn2").on("click", function() {
                    var boxs = $(".box");
                    var box1 = $(".box1");
                    for (var i = 0; i < boxs.length; i++) {
                        if (boxs[i].checked == false) {
                            boxs[i].checked = true;
                        } else {
                            boxs[i].checked = false;
                        }
                    };
                    if ($(".box:checked").length == $(".box").length) {
                        // console.log(box1[0].checked);
                        if (box1[0].checked == false) {
                            box1.prop("checked", true);
                        } else {
                            box1.prop("checked", false);
                        }
                    } else {
                        box1.prop("checked", false);
                    }
                });

3.4 box1事件

   $(".box1").on("click", function() {
                    var boxs = $(".box");
                    if ($(".box1")[0].checked == true) {
                        for (var i = 0; i < boxs.length; i++) {
                            boxs[i].checked = true;
                        }
                    } else {
                        for (var i = 0; i < boxs.length; i++) {
                            boxs[i].checked = false;
                        }
                    }
                });

3.5 点击下面每个box，当全部选择时，box1为选择状态

    var boxs = $(".box");
                boxs.on("click", function() {
                    var box1 = $(".box1");
                    var count = 0;
                    for (var i = 0; i < boxs.length; i++) {
                        if (boxs[i].checked == true) {
                            count = count + 1;
                            // console.log(count);
                        }
                        if (count == boxs.length) {
                            box1.prop("checked", true);
                        } else {
                            box1.prop("checked", false);
                        }
                    };
                });

删除，修改，增加功能见下一篇文章链接

https://blog.csdn.net/weixin_44129913/article/details/101602985

雪舞芷境

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 框架中 jquery对表的操作 1

表格结构：1.HTML代码<body> <div class="row"> <div class="col-md-4 col-md-offset-4"> <table id="tb" class="table table-bordered table-hover"> ...
复制链接

扫一扫

专栏目录