zoukankan      html  css  js  c++  java
  • 实现bootstrap表格的选择框(checkbox)的全选和单选功能

    实现的方法是从网上论坛看到的,然后根据自己情况写来用的。table里面的checkbox选择框是在html里面就写好了,不是后期用js代码插入进去的。效果预览图

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>table表格的选择功能</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            table.table tr th,
            td {
                text-align: center;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body class="container">
        <div class=".table-responsive">
            <!--<button id="btn" class="btn btn-primary">按钮</button>-->
            <br>
            <br>
            <table id="" class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
                        </th>
                        <th>部门名称</th>
                        <th>部门负责人</th>
                        <th>联系电话</th>
                        <th>地址</th>
                        <th>操作列</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="html" lay-skin="primary" lay-filter="allChoose">
                        </td>
                        <td>信息部</td>
                        <td>张三</td>
                        <td>1395464646</td>
                        <td>XX市XX区</td>
                        <td>编辑</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="css" lay-skin="primary" lay-filter="allChoose">
                        </td>
                        <td>财务部</td>
                        <td>李四</td>
                        <td>1785454646</td>
                        <td>湖北省</td>
                        <td>添加</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="javascript" lay-skin="primary" lay-filter="allChoose">
                        </td>
                        <td>业务部</td>
                        <td>王五</td>
                        <td>13246231</td>
                        <td>湖南省</td>
                        <td>删除</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    
    </html>
    <script>
        // $(function () {
        //     $("#btn").on('click', function () {
        //         var rows = $("table").find('tbody input[type="checkbox"]');
        //         console.log(rows);
        //         var ids = [];
        //         rows.each(function (item, index) {
        //             if (index.checked) {
        //                 ids.push(index.name);
        //             }
        //         });
        //         console.log(ids);
        //     });
        // });
        $(function () {
            checkBox();
    
            function checkBox() {
                var $thr = $("table thead tr"); //表格头部的tr
                var $checkAllTh = $("table thead tr").find('input').parent(); //表格头部的的全选按钮
                var $tbr = $("table tbody tr"); //表格内容的tr
    
                var $checkAll = $thr.find('input'); //表格头部的全选框
                //全选
                $checkAll.click(function (event) {
                    //根据表格头部(thead)的全选框的是否选中的状态(true或false)来设置表格内容(tbody)的选择框状态
                    $tbr.find('input').prop('checked', $(this).prop('checked'));
                    if ($(this).prop('checked')) {
                        $tbr.find('input').parent().parent().addClass('danger');
                    } else {
                        $tbr.find('input').parent().parent().removeClass('danger');
                    }
                    //防止点击事件向父元素冒泡    必须加阻止事件冒泡,不然会出现单击全选框按钮无作用的情况
                    event.stopPropagation();
                });
    
                //点击表格头部全选框所在的单元格时也触发全选框的点击操作
                $checkAllTh.click(function () {
                    $(this).find('input').click();
                });
    
    
                //点击表格内容(tbody)下面的每一行的选择框
                $tbr.find('input').click(function (event) {
                    //给选中和未选中,添加和删除样式
                    $(this).parent().parent().toggleClass('danger');
                    //判断tbody里面的已经选中的input长度和表格内容本有的input长度是有相等,如果相等,则把theard的选择框置为选中,
                    $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.find('input').length ?
                        true : false);
                    event.stopPropagation(); //防止点击事件向父元素冒泡    必须加阻止事件冒泡,不然会出现单击每一行内容的选框按钮无作用的情况   
                });
                //点击tbody下面的每一行(非选择框)也能触发选择框的点击操作
                $tbr.click(function () {
                    $(this).find('input').click();
                });
            }
        })
    </script>
    

      

  • 相关阅读:
    论工作动力的来源是什么?答案是来自于实现自己的梦想
    向梦想者致敬
    内置函数,递归函数,模块与包,开发目录规范
    迭代器,生成器
    闭包函数,装饰器,语法糖
    函数对象,名称空间及查找,作用域
    函数调用与参数
    字符编码
    文件处理
    python 11.5数据类型及常用方法
  • 原文地址:https://www.cnblogs.com/lxk0301/p/7007273.html
Copyright © 2011-2022 走看看