<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
</head>
<body>
<h1>JankoAtWarpSpeed demos</h1>
<p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/07/19/Expand-table-rows-with-jQuery-jExpand-plugin.aspx">Expand table rows with jQuery - jExpand plugin</a></p>
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official
Yearbook of the United Kingdom</a></li>
</ul>
</td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240?km2</td>
<td>Hindi, English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
</ul>
</td>
</tr>
</table>
<em>* Information taken from Wikipedia</em>
</body>
</html>
分享到：
相关推荐
详细讲述了tableview表格的折叠编写
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
可以折叠的表格html的
html5折叠表格
主要介绍了EasyUI折叠表格层次显示detailview详解及实例,非常不错，具有参考借鉴价值，需要的朋友参考下吧
封装好的分组折叠表格，欢迎大家使用。无聊
axure,菜单,Tab切换、可折叠菜单、表格，登陆页面高保真模型
折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单窗口 创建窗口工具栏 窗口与布局 创建对话框窗口 自定义工具条和按钮 树形菜单 使用标签创建树形菜单 创建异步树形菜单...
代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <meta http-equiv=”Content-Type” content=... charset=utf-8″ /> <...script type=”tex
刚到一家新公司，领导下发任务要用cs系统做一个表格折叠显示，这真是把我难倒了，自己工作6年一直以来都是做BS的系统。这如果在BS里面那太简单了，JqGrid默认都自带，可是DataGridview不支持折叠啊。自己一点经验...
django-foldable-admin允许折叠/扩展应用程序部分。 :skull_and_crossbones: 此项目不再受支持 :skull_and_crossbones: 要求： Django> = 1.8（自Django> = 2起未在新版本上进行测试） Python 2.7或> = 3.3...
Axure实现随意折叠和展开，类似jQuery 效果 - 淡入淡出等等
YNExpandableCell 用Swift 3编写的可扩展，可折叠表格单元格
HTML懒加载的折叠表格demo
实例演示 http://ued.pingan.com/id/demos/table/tree.jsp#example
DataTables行分组的展开与折叠功能的实现
主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
WPF中使用DataGrid完成一个行级数据折叠收缩展开的功能，通过点击行头折叠或者展开明细数据。该能能常见的使用在数据的明细汇总展示上，初始展示汇总数据点击展示某行汇总的结果展示对应的明细信息。
Bootstrap每天必学之折叠，本文向大家讲解了Bootstrap折叠操作，感兴趣的小伙伴们可以参考一下