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$('tr.parent').click(function(){
2            $(this).toggleClass("selected").siblings(".child_"+this.id).toggle();
3 })
完整代码：
Code
如果我们想一打开页面就是一个折叠的效果可以
1$('tr.parent').click(function(){
2    $(this).toggleClass("selected").siblings(".child_"+this.id).toggle();
3}).click();
posted @ 2009-07-24 14:16  郭培  阅读(737)  评论(0)    收藏  举报