jQuery表格内容筛选

来源：互联网发布：软件开发的发展趋势编辑：程序博客网时间：2024/05/16 17:46

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="scripts/jquery.min.js"></script></head><style>table,tr,td{border:solid 1px;border-collapse:collapse;text-align:center;}</style><body>筛选：<input id="filter" type="text"><table><thead><tr><td>姓名</td><td>性别</td><td>暂住地</td></tr></thead><tbody><tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr><tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr><tr class="child_row_01"><td>三</td><td>男</td><td>浙江宁波</td></tr><tr class="parent" id="row_02"><td colspan="3">后端开发组</td></tr><tr class="child_row_02"><td>张三</td><td>男</td><td>宁波</td></tr><tr class="child_row_02"><td>三</td><td>男</td><td>浙江宁波</td></tr><tr class="parent" id="row_03"><td colspan="3">美工组</td></tr><tr class="child_row_03"><td>张</td><td>男</td><td>浙江</td></tr><tr class="child_row_03"><td>三</td><td>男</td><td>浙江宁波</td></tr></tbody></table></body><script type="text/javascript">$(function(){$('#filter').keyup(function(){$('table tbody tr').hide().filter(":contains('"+($(this).val())+"')").show();});});</script></html>

阅读全文

0 0