jquery Operation Table Table

First, data preparation
<table id= "Table1" >
<tr><th> article title </th><th> article category </th><th> release time </th><th> action </th> </tr>
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
</table>
<table id= "Table2" >
<tr><td> article title </td><td> article category </td><td> release time </td><td> action </td> </tr>
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
</table>
<table id= "Table3" >
<thead>
<tr><td> article title </td><td> article category </td><td> release time </td><td> action </td> </tr>
</thead>
<tbody>
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
</tbody>
</table>
<table id= "Table4" >
<thead>
<tr><td> article title </td><td> article category </td><td> release time </td><td> action </td> </tr>
</thead>
<tbody>
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test </td><td> Test </td><td> Test </td><td> test </td></tr >
<tr><td> Test 3</td><td> Test </td><td> Test </td><td> test </td></tr >
</tbody>
</table>

Second, the operation
<script type= "Text/javascript" >
1. Mouse Moving Line Color
$ ("#table1 tr"). Hover (function () {
$ (this). Children ("TD"). AddClass ("hover")
},function () {
$ (this). Children ("TD"). Removeclass ("hover")
})
$ ("#table2 tr:gt (0)"). Hover (function () {
$ (this). Children ("TD"). AddClass ("hover");
}, function () {
$ (this). Children ("TD"). Removeclass ("hover");
});

2. Odd and even rows of different colors
$ ("#table3 tbody tr:odd"). CSS ("Background-color", "#bbf");
$ ("#table3 tbody tr:even"). CSS ("Background-color", "#ffc");
$ ("#table3 tbody tr:odd"). AddClass ("odd")
$ ("#table3 tbody Tr:even"). AddClass ("even")

3. Hide a row
$ ("#table3 tbody tr:eq (3)"). Hide ();

4. Hide a column
$ ("#table5 tr td::nth-child (3)"). Hide ();
$ ("#table5 tr"). each (function () {$ ("Td:eq (3)", this). Hide ()});

5. Delete a row
Delete all rows except the first line
$ ("#table6 Tr:not (: First)"). Remove ();

6. Delete a column
Remove all columns except the first column
$ ("#table6 tr td:not (: Nth-child (1))"). Remove ();

7. Get (set) the value of a cell
Set Table7, the value of the first TD of the 2nd tr.
$ ("#table7 tr:eq (1) td:nth-child (1)"). HTML ("value");
Gets the value of Table7, the first TD of the 2nd tr.
$ ("#table7 tr:eq (1) td:nth-child (1)"). html ();

8. Insert a row:
Insert a row after the second TR
$ ("<tr><td> insert 3</td><td> Insert </td><td> Insert </td><td> Insert </td>< /tr> "). InsertAfter ($ (" #table7 tr:eq (1) "));

Delete the specified line (second row) $ ("#table3 tr:gt (0): eq (1)"). Remove ();

(2) Delete columns, such as deleting the second column in the table:

EQ: Get child element Index starting from 0, first delete the header $ ("#table3 tr th:eq (1)"). Remove ();//nth-child: Gets the child element starting from 1 $ ("#table3 tr td:nth-child (2)"). Remove ();

(3) Delete other rows, such as all rows except the second row:

$ ("#table3 tr:gt (0): Not (: eq (1))"). Remove ();

(4) Delete other columns, such as all columns except the second column:

First delete the header $ ("#table3 tr th:not (: eq (1))"). Remove (); $ ("#table3 tr td:not (: Nth-child (2))"). Remove ();

(5) Hiding rows, such as hiding the second line:

$ ("#table3 tr:gt (0): eq (1)"). Hide ();//or//$ ("#table3 tr:gt (0): eq (1)"). CSS ("display", "none")//Display//$ ("#table3 tr:gt ( 0): eq (1) "). CSS (" Display "," ");

(6) Hiding columns, such as hiding the second column:

$ ("#table3 tr th:eq (1)"). Hide (); $ ("#table3 tr td:nth-child (2)"). Hide ();//or//$ ("#table3 tr th:eq (1)"). CSS ("display", "none");//$ ("#table3 TR TD: Nth-child (2) "). CSS (" display "," none ");//Display//$ (" #table3 tr th:eq (1) "). CSS (" Display "," ");//$ (" #table3 tr td:nth-child (2) "). CSS (" Display "," ");

</script>

jquery Operation Table Table