jQuery 表格展开伸缩的示例代码
本文导语: 本节内容： jQuery实现表格的展开伸缩。 例子： 代码示例: jQuery实现表格的展开伸缩 - www. table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-ali...
本节内容：
jQuery实现表格的展开伸缩。
例子：
jQuery实现表格的展开伸缩 - www.
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
.parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
}).click();
})
姓名性别暂住地
前台设计组
张山男浙江宁波
李四女浙江杭州
前台开发组
王五男湖南长沙
找六男浙江温州
后台开发组
Rain男浙江杭州
MAXMAN女浙江杭州
效果图：
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。