關於jquery簡單操作簡單表格

標籤：checked   亦或   check   反選   展現   his   cap   事件   編號   

最近在摸索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簡單操作簡單表格