Home > Developer > JavaScript
Copy codeThe Code is as follows:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JQuery table content filtering </title>
<Style type = "text/css">
Table {border: 0; border-collapse: collapse ;}
Div {font: normal 12px/17px Arial ;}
Td {font: normal 12px/17px Arial; padding: 2px; width: 100px ;}
Th {font: bold 12px/17px Arial; text-align: left; padding: 4px; border-bottom: 1px solid #333; width: 100px ;}
. Even {background: # FFF38F;}/* even row style */
. Odd {background: # FFFFEE;}/* odd row style */
. Selected {background: # FF6500; color: # fff ;}
</Style>
<! -- Introduce jQuery -->
<Script src = "jquery-1.5.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# FilterName"). keyup (function (){
$ ("Table tbody tr ")
. Hide ()
. Filter (": contains ('" + ($ (this). val () + "')")
. Show ();
}). Keyup ();
})
</Script>
</Head>
<Body>
<Div> <br/> filter: <input id = "filterName" name = "filterName"/> <br/> </div>
<Table>
<Thead>
<Tr> <th> name </th> <th> gender </th> <th> temporary residence </th> </tr>
</Thead>
<Tbody>
<Tr> <td> SYJ </td> <td> male </td> <td> Qinhuangdao City, Hebei Province </td> </tr>
<Tr> <td> Li Si </td> <td> female </td> <td> Beijing </td> </tr>
<Tr> <td> Wang Wu </td> <td> male </td> <td> Qinhuangdao City, Hebei Province </td> </tr>
<Tr> <td> Zhao liu</td> <td> male </td> <td> Tangshan City, Hebei Province </td> </tr>
<Tr> <td> Zhang San </td> <td> male </td> <td> Hohhot, Inner Mongolia </td> </tr>
<Tr> <td> Wang liu</td> <td> female </td> <td> Baotou City, Inner Mongolia </td> </tr>
<Tr> <td> dongle </td> <td> male </td> <td> Beijing </td> </tr>
<Tr> <td> Li Zi </td> <td> female </td> <td> Qinhuangdao City, Hebei Province </td> </tr>
<Tr> <td> egg </td> <td> male </td> <td> northeast Liaoning </td> </tr>
</Tbody>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
