jquery implements the search function of the table

Author original, reproduced please indicate the source!

The HTML code is as follows:

<inputtype= "text"ID= "txt"value="" /><inputtype= "button"ID= "BTN"value= "Search" /><TableBorder= "1"cellspacing= "0"cellpadding= "0">    <thead>        <TR>            <th>Name</th>            <th>Gender</th>            <th>Phone</th>        </TR>    </thead>    <tbody>        <TR>            <TD>Tom</TD>            <TD>Man</TD>            <TD>13112345678</TD>        </TR>        <TR>            <TD>John doe</TD>            <TD>Man</TD>            <TD>1345454548</TD>        </TR>        <TR>            <TD>Wang Xiao Hua</TD>            <TD>Woman</TD>            <TD>1234567890</TD>        </TR>        <TR>            <TD>Laugh and Smile</TD>            <TD>Woman</TD>            <TD>1098909223</TD>        </TR>    </tbody></Table>

The CSS style code is as follows:

table  { width :  700px ;  border :  1px solid #008000 ;  margin :  10px 0 0 0 ;  Border-collapse :  collapse ; /*   table border Merge  */}tr  { height :  30px ;  Text-align :  center ;} th,td  { border :  1px solid #008000 ;} 

The jquery code is as follows: (You have to first introduce jquery's JS file (⊙o⊙)!)

$ (function  () {    $ ("#btn"). Click (function  () {        var $sea =$ (' #txt '). Val ();         // hide all before displaying values that match the filter criteria        $ (' Table tbody tr '). Hide (). Filter (': Contains (' + $sea + ') '). Show ();    });});

Look without filtering

After filtering (⊙o⊙) OH

To be Continued ...

You also run quickly!!

jquery implements the search function of the table