jquery實現表格的搜索功能

版權聲明：做者原創，轉載請註明出處！

HTML代碼以下：

<input type="text" id="txt" value="" />
<input type="button" id="btn" value="搜索" />
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>電話</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>13112345678</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>1345454548</td>
        </tr>
        <tr>
            <td>王小花</td>
            <td>女</td>
            <td>1234567890</td>
        </tr>
        <tr>
            <td>笑笑</td>
            <td>女</td>
            <td>1098909223</td>
        </tr>
    </tbody>
</table>

View Code

CSS樣式代碼以下：

table{
    width: 700px;
    border: 1px solid #008000;
    margin: 10px 0 0 0;
    border-collapse: collapse;/*表格邊框合併*/
}
tr{
    height: 30px;
    text-align: center;
}
th,td{
    border: 1px solid #008000;
}

View Code

jquery代碼以下：（你要先引入jquery的js文件(⊙o⊙)哦）

$(function () { $("#btn").click(function () { var $sea=$('#txt').val(); //先隱藏所有，再把符合篩選條件的值顯示
        $('table tbody tr').hide().filter(':contains('+$sea+')').show(); }); });

未進行篩選的樣子

 

篩選以後(⊙o⊙)哦

未完待續......

你也趕忙運行起來吧！！