Code sharing for a JQuery Table operation

Copy codeThe Code is as follows:
I. Data Preparation
<Table id = "table1">
<Tr> <th> Article Title </th> <th> Article Category </th> <th> release date </th> <th> operation </th>/ tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
</Table>
<Table id = "table2">
<Tr> <td> Article Title </td> <td> Article Category </td> <td> release date </td> <td> operation </td>/ tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
</Table>
<Table id = "table3">
<Thead>
<Tr> <td> Article Title </td> <td> Article Category </td> <td> release date </td> <td> operation </td>/ tr>
</Thead>
<Tbody>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
</Tbody>
</Table>
<Table id = "table4">
<Thead>
<Tr> <td> Article Title </td> <td> Article Category </td> <td> release date </td> <td> operation </td>/ tr>
</Thead>
<Tbody>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
<Tr> <td> test </td> </tr>
<Tr> <td> Test 3 </td> <td> test </td> </tr>
</Tbody>
</Table>
Ii. Operations
<Script type = "text/javascript">
// 1. Move the mouse to change 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. Different colors of the parity row
$ ("# 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 row
$ ("# Table6 tr: not (: first)"). remove ();
// 6. delete a column
// Delete all columns except the first column
$ ("# Table6 tr td: not (: nth-child (1)"). remove ();
// 7. Get (SET) the value of a cell
// Set the first td value of 2nd tr in table 7.
$ ("# Table7 tr: eq (1) td: nth-child (1)" comment .html ("value ");
// Obtain the first td value of 2nd tr in table 7.
$ ("# Table7 tr: eq (1) td: nth-child (1)" pai.html ();
// 8. Insert a row:
// Insert a row after the second tr
$ ("<Tr> <td> insert 3 </td> <td> insert </td> </tr> "). insertAfter ($ ("# table7 tr: eq (1 )"));
</Script>