本文实例讲述了jQuery实现的表格展开伸缩效果。分享给大家供大家参考，具体如下：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title样式表{边框：0；边框塌陷：} TD { font : normal 12px/17px Arial；padding:2px宽度width :100 px } th { font : bold 12px/17px Arial；向左文本对齐：padd :4 pxborder-bottom :1 px实心# 333;宽度宽度：100px}。父{ background : # fff 38 fcursor : pointer指针；} /* 偶数行样式*/.奇数{ background: # FFFFEE} /*奇数行样式*/.选中{ background : # ff 6500 color : # fff }/style script src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' tr。家长').单击(函数(){ //获取所谓的父行$(这个)。toggleClass('选定')//添加/删除高亮。兄弟姐妹('。child_' this.id).toggle()；//隐藏/显示所谓的子行});})/脚本/床头桌等等姓名/th性别/th暂住地/th/tr/ad t正文tr class=' parent ' id=' row _ 01 ' TD col span=' 3 '前台设计组/td /tr tr class='child_row_01' td张山运输署/运输署男运输署/运输署浙江宁波/td /tr tr class='child_row_01' td李四运输署/运输署女运输署/运输署浙江杭州/TD/tr tr class=' parent ' id=' row _ 02 ' TD col span=' 3 '前台开发组/td /tr tr class='child_row_02' td王五运输署/运输署男运输署/运输署湖南长沙/td /tr tr class='child_row_02' td找六运输署/运输署男运输署/运输署浙江温州/TD/tr tr class=' parent ' id=' row _ 03 ' TD col span=' 3 '后台开发组/TD/tr级=' child _ row _ 03 ' TDRain/TD TD男运输署/运输署浙江杭州/TD/tr class=' child _ row _ 03 ' TDMaxMan/TD TD女运输署/运输署浙江杭州/td /tr /tbody/table/body/html运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。