jq-实战之表格筛选

css部分

.select{background: #ccc}

html部分

　　　　　　table width="80%" cellspacing="0" cellspacing="0" border="1">
                <thead>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>帅选：<input id="xx" type="text" value="2" /></th>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>女</td>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>王武</td>
                        <td>男</td>
                        <td>67</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>27</td>
                    </tr>
                </tbody>
            </table>

jq部分

　　　　　$("#xx").keyup(function() {  //按下事件
            $(‘table tbody tr‘).hide() //所有隐藏
            .filter(‘:contains(‘+$(this).val()+‘)‘).addClass("select").show();  //筛选出输入框val()
            if(!$(this).val()){
                $(‘table tbody tr‘).show().removeClass(‘select‘);
            }
        }).keyup(); //dom 加载完成后立即触发

完成！