关于jquery简单操作简单表格

Posted 2020-08-22

最近在摸索jquery中，想着学习过程中还是记下点自己的东西比较好，不管是日后自己查阅，亦或是对于他人有些许帮助。

也是一件两全其美的事情了。

下面我就简单 贴上自己的html中重要部分了。

具体实现了的内容有：

 1. 光标附上 表格隔行变色效果

 2. 点击全选按钮 ，选中所有未选中项；或者全选时，取消全选

 3. 选中项删除行操作

jquery版本： jquery-3.1.1

一，页面样式表与布局 

 <div class="tab-ope">
        <table>
            <caption>数据管理</caption>
            <tr>
                <th>选项</th>
                <th>编号</th>
                <th>购书人</th>
                <th>性别</th>
                <th>购书价</th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1001</label>
                </td>
                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>

            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1002</label>
                </td>
                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>

            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1003</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1004</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1005</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1006</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1007</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1008</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    <label>1009</label>
                </td>

                <td>
                    <label>张三</label>
                </td>
                <td>
                    <label>男</label>
                </td>
                <td>
                    <label>￥55.23</label>
                </td>
            </tr>

        </table>
    </div>
    <div class="control">
        <button id="selectAll">全选</button>
        <button id="delete">删除</button>
    </div>

　　二，jquery 代码实现部分

 //光标附上，奇数行变色；
            $("table tr:odd").hover(function () {
                $(this).toggleClass("row-odd");
            });
            //光标附上，偶数行变色；
            $("table  tr:even").hover(function () {
                $(this).toggleClass("row-even");
            })
            //全选按钮事件
            $("#selectAll").click(function () {
                //若未全选中，则点击全选按钮，所有checkbox 选中
                if ($("input[type=checkbox]:checked").length == $(":checkbox").length) {
                    //全选中状态，反选
                    $(":checkbox").removeAttr("checked");
                } else {
                    //未全选中状态，全选操作
                    $(":checkbox").attr("checked", "checked");
                }
            });

            //删除选中行。
            $("#delete").click(function () {
               
                //遍历 所有checkbox ，使用each遍历
                $(":checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        //获取选中行的下标索引，以便 删除操作
                        var index = $(this).parent("td").parent("tr").index();
                        $("tr")[index].remove();
                    }
                });
            });

以上便为实现的具体方式的展现了。