您的位置：首页 > Web前端 > JQuery

jQuery表格内容筛选

2017-12-05 16:33 274 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航