jquery实现全选、反选效果及动态地添加和删除表格数据

jquery实现全选、反选效果及动态地添加和删除数据

01.html代码：

    <div class="box">
        <div class="wrap">
            <button id="addBtn">添加单行信息</button>
            <!-- 表格主体 -->
            <table border="1px solid #ccc">
                <thead>
                    <th>
                        <input type="checkbox" name="" id="j_selectAll">
                    </th>
                    <th>人物</th>
                    <th>介绍</th>
                    <th>产品</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>史蒂夫·保罗·乔布斯</td>
                        <td>苹果公司CEO</td>
                        <td>Apple系列</td>
                        <td class="removeBtn">删除</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>丹尼斯·里奇</td>
                        <td>C语言之父</td>
                        <td>c语言</td>
                        <td class="removeBtn">删除</td>

                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>比尔·盖茨</td>
                        <td>微软CEO</td>
                        <td>Windows系统</td>
                        <td class="removeBtn">删除</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>马云</td>
                        <td>阿里CEO</td>
                        <td>网络交易平台</td>
                        <td class="removeBtn">删除</td>
                    </tr>
                </tbody>

            </table>
            <button class="delateAllBtn">删除所选</button>
        </div>
        <!-- 遮罩层 -->
        <div class="markLayer"></div>
        <!-- 添加数据的表单 -->
        <div class="addPanel">
            <h5 class="addPelTitle"><span>添加数据</span> <span id="closeBtn">x</span></h5>
            <form action="" id="form1">
                姓名：<input type="text" placeholder="请输入人物姓名"><br>
                介绍：<input type="text" placeholder="请输入人物介绍"><br>
                产品：<input type="text" placeholder="请输入人物产品">
            </form>
            <button id="addPelBtn">添加</button>
        </div>
    </div>

02.css样式：

* {
            margin: 0;
            padding: 0ex;
        }

        .box {
            width: 100%;
            height: 100%;
        }

        .wrap {
            position: relative;
            width: 500px;
            margin: 20px auto;
            text-align: center;
        }

        table {
            margin-top: 40px;
        }

        table td {
            padding: 5px 10px;
            font-size: 18px;
        }

        #addBtn {
            margin-bottom: 10px;
            padding: 5px;
            color: #B0C4DE;
            position: absolute;
            top: -35px;
            right: 36px;
        }

        .removeBtn {
            cursor: pointer;
            color: red;
        }

        .delateAllBtn {
            margin: 20px 0;
            width: 100px;
            height: 40px;
        }

        /* 遮罩层 */
        .markLayer {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #666666;
            opacity: 0.6;
            z-index: 3;
        }

        .addPanel {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 370px;
            text-align: center;
            border: 1px solid #ccc;
            /* margin: auto auto; */
            background-color: #fff;
            z-index: 9999;
        }

        .addPanel .addPelTitle {
            position: relative;
            background-color: #f7f7f7;
            color: #727073;
            font: 15px/32px "微软雅黑";
            text-align: left;
            margin: 0;
            padding-left: 10px;
        }

        .addPelTitle #closeBtn {
            position: absolute;
            right: 14px;
            text-align: right;
            cursor: pointer;
            font-size: 20px;
        }

        #form1 {
            margin: 15px 0 0 18px;
            font: 15px/30px "微软雅黑";
            color: #353331;
        }

        #form1 input {
            width: 260px;
            height: 30px;
            border: 1px solid #c7c5c4;
            margin-bottom: 30px;
        }

        #addPelBtn {
            width: 146px;
            height: 25px;
            font: 12px/25px;
            margin-bottom: 17px;
            border: 1px solid #a8a9ac;
        }

03.js代码

<script src="../jquery-1.12.1.js"></script>
    <script>
        //1.删除单行元素(on解决新追加的数据没有绑定事件问题)
        $('.removeBtn').click(function () {
            $(this).parent().detach();
        });
        // 2.点击添加信息，显示遮罩层和添加面板
        $('#addBtn').click(function () {
            $('.markLayer').show();
            $('.addPanel').show();
        });
        // 3.点击面板里的关闭按钮，隐藏面板和遮罩层
        $('#closeBtn').click(function () {
            $('.markLayer').hide();
            $('.addPanel').hide();
        });
        // 4.点击添加面板的添加按钮，会将输入的内容生成一个tr,并将其添加到tbody中,最后隐藏面板和遮罩层
        $('#addPelBtn').click(function () {
            // 4.1 获取用户输入的内容
            let name = $('#form1 input:eq(0)').val();
            let introduct = $('#form1 input:eq(1)').val();
            let product = $('#form1 input:eq(2)').val();
            // 4.2 生成新的一个tr
            let newData = $('<tr><td><input type="checkbox" name="" id=""></td><td>' + name + '</td><td>' +
                introduct + '</td><td>' + product +
                '</td><td class="removeBtn">删除</td></tr>');
            newData.find('.removeBtn').click(function () {
                $(this).parent().remove();
            })
            console.log(newData);
            // 4.3 将生成的tr加入到tbody中
            $("tbody").append(newData);
            // 4.4 隐藏面板和遮罩层
            $('.markLayer').hide();
            $('.addPanel').hide();
        })

        // 5.全选功能的实现
        // 5.1 tbody所有input框的checked值跟随全选框变化
        $('#j_selectAll').click(function () {
            // 获取全选框的状态
            let j_selAllVal = $(this).prop('checked');
            $('tbody input').prop('checked', j_selAllVal);
        })
        // 5.2 下面单选框全部选中时，上面的全选框被选中，否则不选中
        $('tbody input').click(function () {
            let curCheckNum = $('tbody input:checked').length;
            let totalNum = $('tbody input').length;
            // if (curCheckNum == totalNum) {
            //     $('#j_selectAll').prop('checked', true);
            // } else $('#j_selectAll').prop('checked', false);
            // 简化if后：
            $('#j_selectAll').prop('checked', curCheckNum == totalNum);
        })

        // 6.点击“删除所选”按钮，删除选择部分的tbody 单元格
        $('.delateAllBtn').click(function () {
            $('tbody input:checked').parent().parent().remove();
        })
    </script>