表格展开闭合以及搜索
<!DOCTYPE html>
<html>
<head>
<title>表格展开闭合</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
tr td{
width:100px;
font:normal 12px/17px Arial;
}
tr th{
width:100px;
text-align:left;
font:bold 12px/17px Arial;
}
.odd{
background-color: rgba(232, 230, 230, 0.46);
}
.selected{
color:#fff;
}
.high{
background-color:rgba(228, 132, 17, 0.87);
}
</style>
</head>
<body>
<div class="header">
<label for="search">筛选</label><input type="text" name="search" id="search">
</div>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_1"><td colspan="3">前端设计组</td></tr>
<tr class="child_row_1"><td>张三</td><td>男</td><td>广州</td>
</tr>
<tr class="child_row_1"><td>李四</td><td>男</td><td>东莞</td>
</tr>
<tr class="child_row_1"><td>小明</td><td>男</td><td>深圳</td>
</tr>
<tr class="parent" id="row_2"><td colspan="3">后端开发组</td></tr>
<tr class="child_row_2"><td>小花</td><td>女</td><td>茂名</td>
</tr>
<tr class="child_row_2"><td>小虎</td><td>男</td><td>湛江</td>
</tr>
<tr class="child_row_2"><td>赵六</td><td>男</td><td>上海</td>
</tr>
<tr class="parent" id="row_3"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_3"><td>王五</td><td>女</td><td>湖南</td>
</tr>
<tr class="child_row_3"><td>刘思思</td><td>女</td><td>广州</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
//1.表单变色
$("tbody>tr:odd").addClass('odd');
$("tr.parent td").addClass('high');
//2.
$("tr.parent").click(function() {
$(this).toggleClass('selected')
.siblings('.child_'+this.id).toggle();
}).click();
//筛选
$("#search").keyup(function() {
$("tbody tr").hide()
.filter(":contains('"+this.value+"')").show();
});
})
</script>
</body>
</html>
