Simple operation simple table for jquery

Recently in the groping jquery, think of learning process or write down their own things better, whether it is in the future to check, or for others have a little help.

It's also a matter of both worlds.

I'll simply post an important part of my HTML.

The specific implementation of the content is:

1. The cursor is attached to the table interlaced color effect

2. Click the Select All button to check all unchecked items, or deselect all when selecting all

3. Select the Delete Row action

jquery version: jquery-3.1.1

One, page style sheet and layout

 <div class= "Tab-ope" > <table> <caption> Data Management </caption> <tr>                <th> options </th> <th> numbering </th> <th> bookseller </th>                <th> sex </th> <th> book price </th> </tr> <tr> <td> <input type= "checkbox"/> </td> &LT;TD&G                    T <label>1001</label> </td> <td> <label> Zhang San &lt                ;/label> </td> <td> <label> men </label> </td> <td> <label>￥55.23</label> </td&gt            ; </tr> <tr> <td> <input type= "checkbox"/>               </td> <td> <label>1002</label> &lt                ;/td> <td> <label> Zhang San </label> </td>                    <td> <label> men </label> </td> <td>                <label>￥55.23</label> </td> </tr> <tr> <td> <input type= "checkbox"/> </td> <td                    > <label>1003</label> </td> <td> <label> Zhang San </label> </td> <td> <label> Male                </label> </td> <td> <label>￥55.23</label> </td>                </tr> <tr> <td> <input type= "checkbox"/>                </td> <td> <label>1004</label> </td> <td> <label> Zhang San </label> </td> <td&                    Gt <label> men </label> </td> <td> &LT;LABEL&GT;￥55.23&L                    t;/label> </td> </tr> <tr> <td> <input type= "checkbox"/> </td> <td> <label& Gt;1005</label> </td> <td> <label> Zhang San </label&gt                ;        </td> <td> <label> Men </label>        </td> <td> <label>￥55.23</label> </td&            Gt                </tr> <tr> <td> <input type= "checkbox"/>                </td> <td> <label>1006</label> </td> <td> <label> Zhang San </label> </td> <td&                    Gt <label> men </label> </td> <td> &LT;LABEL&GT;￥55.23&L                    t;/label> </td> </tr> <tr> <td> <input type= "checkbox"/> </td> <td> <label& gt;1007</label> </td> <td> <label> SheetsThree </label> </td> <td> <label> men </label> </td> <td> <label>￥55.23</label> </t d> </tr> <tr> <td> <input type= "checkbox"                /> </td> <td> <label>1008</label>                </td> <td> <label> Zhang San </label> </td>                    <td> <label> men </label> </td> <td> <label>￥55.23</label> </td> </tr> &LT;TR&G                T              <td> <input type= "checkbox"/> </td> <td>      <label>1009</label> </td> <td> <label&gt                ; Zhang San </label> </td> <td> <label> men </label> </td> <td> <label>￥55.23</label> < /TD> </tr> </table> </div> <div class= "Control" > <button id= " SelectAll "> select all </button> <button id=" delete "> Delete </button> </div>

Two, jquery Code implementation section

 The cursor is attached, the odd line is discolored; $ ("Table tr:odd"). Hover (function () {$ (this). Toggleclass ("row-odd");            });            The cursor is attached, even lines are discolored; $ ("Table Tr:even"). Hover (function () {$ (this). Toggleclass ("Row-even");                })//Select All button Event $ ("#selectAll"). Click (function () {///If not all selected, select the All checkbox                    if ($ ("input[type=checkbox]:checked"). Length = = $ (": CheckBox"). {//full check, reverse selection                $ (": CheckBox"). Removeattr ("checked");                } else {//unchecked, the Select all Operation $ (": CheckBox"). attr ("Checked", "checked");            }            });            Deletes the selected row. $ ("#delete"). Click (function () {//Traverse all checkboxes, using each to traverse $ (": CheckBox"). EAC                        H (function () {if ($ (this). Is (": Checked")) {//Gets the subscript index of the selected row for the delete operation var index = $(this). Parent ("TD"). Parent ("TR"). index ();                    $ ("tr") [Index].remove ();            }                }); });

The above is for the realization of the specific way to show.

Simple operation simple table for jquery