溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本應用就兩個主要實現：
1.表格的id 和 class之間的命名關系
請看圖： 將組名和個人信息聯表格聯系起來，這樣會很好的操作表格
HTML代碼：
<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="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="child_row_02"><td>孔子</td><td>男</td><td>浙江寧波</td></tr>
2.就是篩選功能的使用：使用filter聯合contains將輸入框的字加入contains進行篩選
javascript代碼：
//設置列表查詢
$("#filterName").keyup(function () {
$("table tbody tr").stop().hide() //將tbody中的tr都隱藏
.filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來
});
下面是完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格應用</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid #000;
margin:50px auto;
width: 340px;
padding: 10px 10px;
}
.box table{
margin: auto;
}
.box .box-top{
width: 303px;
margin: 5px auto;
}
.box table tr td,th{
padding: 5px 30px;
text-align: center;
}
.box table .parent{
background: lightgray;
}
.selected{
background: gray !important;
}
.selectHeight{
background: darkseagreen !important;
}
</style>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//默認讓王五選中
$("tr:contains('王五')").addClass("selectHeight")
//點擊讓其展示出列表 默認讓其都隱藏
$(".box tr.parent").click(function () {
$(this)
.toggleClass("selected")
.siblings(".child_"+this.id).stop().toggle();
}).click();//此行代碼表示要立即執行
//設置列表查詢
$("#filterName").keyup(function () {
$("table tbody tr").stop().hide() //將tbody中的tr都隱藏
.filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來
});
});
</script>
<div class="box">
<div class="box-top">
<span>篩選：</span><input type="text" id="filterName">
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</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="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="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>
<tr class="child_row_03"><td>劉粒粒</td><td>男</td><td>浙江寧波</td></tr>
</tbody>
</table>
</div>
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
