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 加載完成后立即觸發

完成！

轉載于:https://www.cnblogs.com/pangzi666/p/5107714.html

總結

以上是生活随笔為你收集整理的jq-实战之表格筛选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。