jQuery实现的表格展开伸缩效果实例
更新时间：2016年09月07日 15:55:58 作者：onestopweb
这篇文章主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的表格展开伸缩效果。分享给大家供大家参考，具体如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
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;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前台设计组</td>
</tr>
<tr class="child_row_01">
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_01">
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_02">
<td colspan="3">前台开发组</td>
</tr>
<tr class="child_row_02">
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr class="child_row_02">
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr class="parent" id="row_03">
<td colspan="3">后台开发组</td>
</tr>
<tr class="child_row_03">
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr class="child_row_03">
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery移除了live()、die(),新版事件绑定on()、off()的方法
下面小编就为大家带来一篇jquery移除了live()、die(),新版事件绑定on()、off()的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
jQuery CheckBox全选、全不选实现代码小结，对于操作jquery的朋友可以参考下。2010-04-04
这篇文章主要介绍了浅析jQuery Mobile的初始化事件,jQuery是当前人气最高的JavaScript库,需要的朋友可以参考下2015-12-12
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
下面小编就为大家带来一篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本文主要介绍jQuery中on方法使用注意事项。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧，下面与大家分享下对DropDownList进行取值赋值的实现代码2013-08-08
本文主要介绍了jquery判断密码强度的验证代码，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2015-11-11
在一些图片比较多的网站上会出现访问时图片不存在的情况：默认显示出来的样子很不雅观,可以解决图片不存在时，使用其他的图片替换吗，答案是可以的；感兴趣的朋友可以了解下，或许本文可以帮助到你2013-02-02
这篇文章主要介绍了jQuery简单操作cookie的插件,以实例形式分析了jQuery操作cookie的插件功能定义与使用技巧,需要的朋友可以参考下2016-01-01
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
这篇文章主要帮助大家轻松学习jQuery插件EasyUI，重点是EasyUI创建菜单与按钮，按钮分为链接按钮、菜单按钮、分割按钮，对这方面感兴趣的小伙伴们可以参考一下2015-11-11
最新评论