关于jquery简单操作简单表格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于jquery简单操作简单表格相关的知识,希望对你有一定的参考价值。

最近在摸索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();
                    }
                });
            });

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

以上是关于关于jquery简单操作简单表格的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

jQuery_动态表格(简单易懂)

jQuery_动态表格(简单易懂)

jQuery_动态表格(简单易懂)

使用jquery实现简单的表格分页-表头不变

jQuery删除表格指定行代码实例