JQuery学习笔记19——表格展开关闭

1.这个效果的关键是表格的结构：

1<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
2<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
3<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
4<tr class="child_row_01"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
5<tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>
6<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
7<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
8<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>

2.根据样式名称获取单击的分类行：

$('tr.parent')

3.给获取的分类行添加单击事件：（1）给当前分类行添加/删除高亮（2）隐藏/显示所谓子行

$(this).toggleClass("selected");

$(this).siblings(".child_"+this.id).toggle();

需要注意的是：.siblings(".child_row_01")样式名称前要加"."。

1)

完整代码：

>

如果我们想一打开页面就是一个折叠的效果可以

1).click();