Copy Code code as follows:
Filter: <input type= "text" id= "sea"/>
<table width= "100%" id= "se" >
<thead>
<tr><th></th><th> name </th><th> sex </th><th> address </th></tr >
</thead>
<tbody>
<TR class= "Parent" id= "row_01" ><td colspan= "3" > class </td></tr>
<tr class= "child_row_01" ><td></td><td> Big Uncle </td><td> male 10</td><td> Wuhan 1</td></tr>
<tr class= "child_row_01" ><td></td><td> Uncle </td><td> male 9</td><td> Wuhan 2 </td></tr>
<tr class= "child_row_01" ><td></td><td> Uncle </td><td> male 8</td><td> Wuhan 3 </td></tr>
<TR class= "Parent" id= "row_02" ><td colspan= "3" > class </td></tr>
<tr class= "child_row_02" ><td></td><td> Uncle </td><td> male 7</td><td> Wuhan 4 </td></tr>
<tr class= "child_row_02" ><td></td><td> Uncle </td><td> male 6</td><td> Wuhan 5 </td></tr>
<tr class= "child_row_02" ><td></td><td> Uncle </td><td> male 5</td><td> Wuhan 6 </td></tr>
<tr class= "child_row_02" ><td></td><td> Uncle </td><td> male 4</td><td> Wuhan 7 </td></tr>
<TR class= "Parent" id= "row_03" ><td colspan= "3" > class </td></tr>
<tr class= "child_row_03" ><td></td><td> Uncle </td><td> male 3</td><td> Wuhan 8 </td></tr>
<tr class= "child_row_03" ><td></td><td> Uncle </td><td> male 2</td><td> Wuhan 9 </td></tr>
<tr class= "child_row_03" ><td></td><td> Big Uncle </td><td> male 1</td><td> Wuhan 10</td></tr>
</tbody>
</table>
<script type= "Text/javascript" >
$ (function () {
$ ("#sea"). KeyUp (function () {
$ ("#se tbody tr"). Hide (). Filter (": Contains ('" +$ (This). Val () + "')"). Show ();
}). KeyUp ();
});
</script>
Copy Code code as follows:
jquery table Content Filtering
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script src= ". /css/jquery-1.6.2.js "></script>
<script>
$ (function () {
$ (' tr.parent '). Click (function () {
$ (this). Toggleclass ("selected"). Siblings ('. Child_ ' +this.id). Toggle ();
});
});
</script>
<style>
. selected{background:red};
</style>
<title>untitled document</title>
<body>
<table>
<thead>
<tr>
<th> name </th>
<th> Age </th>
</tr>
</thead>
<tbody>
<TR class= "Parent" id= "row_01" >
<TD colspan= "2" > HR </td>
</tr>
<tr class= "Child_row_01" >
<TD > Scripts </td>
<td>20</td>
</tr>
<tr class= "Child_row_01" >
<TD > Scripts </td>
<TD >20</td>
</tr>
<tr class= "Child_row_01" >
<TD > Scripts </td>
<TD >20</td>
</tr>
<TR class= "Parent" id= "row_02" >
<TD colspan= "2" > Technical Department </td>
</tr>
<tr class= "child_row_02" >
<TD > Scripts </td>
<TD >20</td>
</tr>
<tr class= "child_row_02" >
<TD > Scripts </td>
<TD >20</td>
</tr>
<tr class= "child_row_02" >
<TD > Scripts </td>
<TD >20</td>
</tr>
</tbody>
</table>
</body>
