本应用就两个主要实现:
<强> 1。表格的id和类之间的命名关系
请看图:将组名和个人信息联表格联系起来,这样会很好的操作表格
& lt; tr类=案浮眎d=皉ow_01”祝辞& lt; td colspan=?”在前台设计组& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>张三& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>李四& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>胡歌& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=案浮眎d=皉ow_02”祝辞& lt; td colspan=?”在前台开发组& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>李三& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>张无忌& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>孔子& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
之前
<强> 2。就是筛选功能的使用:使用过滤器联合包含将输入框的字加入包含进行筛选
//设置列表查询
$ (" # filterName”)。keyup(函数(){
$ (“tbody tr表”)鸡毛蒜皮()hide()//将身体中的tr都隐藏
.filter(“:包含(”+(美元(这).val()) + " ')”),告诉();//将符合条件的筛选出来
});
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>表格应用& lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
.box {
边界:1 px固体# 000;
保证金:50 px汽车;
宽度:340 px;
填充:10 px 10 px;
}
{.box表
保证金:汽车;
}
.box .box-top {
宽度:303 px;
保证金:5 px汽车;
}
.box表tr td, {
填充:5 px 30 px;
text-align:中心;
}
.box表.parent {
背景:浅灰色;
}
.selected {
背景:灰色!重要;
}
.selectHeight {
背景:darkseagreen !重要;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;脚本src=" http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){//默认让王五选中
$ (" tr:包含(“王”五)”).addClass (“selectHeight”)//点击让其展示出列表默认让其都隐藏
$("。盒子tr.parent”)。点击(函数(){
(美元)
.toggleClass(“选择”)
.siblings (“.child_”+ this.id)鸡毛蒜皮().toggle ();
}).click();//此行代码表示要立即执行//设置列表查询
$ (" # filterName”)。keyup(函数(){
$ (“tbody tr表”)鸡毛蒜皮()hide()//将身体中的tr都隐藏
.filter(“:包含(”+(美元(这).val()) + " ')”),告诉();//将符合条件的筛选出来
})；
})；
& lt;/script>
& lt; div类="盒子"比;
& lt; div类=癰ox-top”比;
& lt; span>筛选:& lt;/span> & lt;输入type="文本" id=癴ilterName”比;
& lt;/div>
& lt; table>
& lt; thead>
& lt; tr>
& lt; th>姓名& lt;/th>
& lt; th>性别& lt;/th>
& lt; th>暂住地& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr类=案浮眎d=皉ow_01”祝辞& lt; td colspan=?”在前台设计组& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>张三& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>李四& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_01 "祝辞& lt; td>胡歌& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=案浮眎d=皉ow_02”祝辞& lt; td colspan=?”在前台开发组& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>李三& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>张无忌& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_02 "祝辞& lt; td>孔子& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=案浮眎d=皉ow_03”祝辞& lt; td colspan=?”祝辞后台设计组& lt;/td> & lt;/tr>
& lt; tr类=" child_row_03 "祝辞& lt; td>王五& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_03 "祝辞& lt; td>单志永& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt; tr类=" child_row_03 "祝辞& lt; td>刘粒粒& lt;/td> & lt; td>男& lt;/td> & lt; td>浙江宁波& lt;/td> & lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;/body>
& lt;/html>
