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 加载完成后立即触发

完成！