<!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表格的折叠"这一主题涉及到如何实现一个可扩展和收缩的表格视图，让用户能够根据需要查看或隐藏某些行。这通常在层级结构的数据展现或者节省屏幕空间时特别有用。以下是对这个知识点的详细讲解： 1. **...
html5折叠表格
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
可以在这里查看下是否需要:...有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
首先，`QTableView`本身并不直接支持折叠和展开功能，因为它是为平面表格设计的。但通过结合`QStandardItemModel`或自定义的`QAbstractItemModel`，我们可以扩展其功能以实现类似树形视图的效果。`...
可以折叠的表格html的
【EasyUI折叠表格层次显示detailview详解】 在Web开发中，EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和简单易用的API，帮助开发者快速构建用户界面。本文将深入探讨EasyUI中的一个特殊功能——折叠表格...
在网页设计中，有时我们需要创建交互式的表格，使得用户可以展开或折叠表格的行来查看或隐藏详细信息。本文将详细讲解如何使用jQuery实现这样的功能，即点击表格的某一行，其下方的相关行会展开显示，再次点击则折叠...
刚到一家新公司，领导下发任务要用cs系统做一个表格折叠显示，这真是把我难倒了，自己工作6年一直以来都是做BS的系统，于是上网搜了相关视频，资料，开始学习起来，下面小编把WinForm中DataGridView折叠控件的知识...
易语言高级表格自适应缩放源码。@易语言源码分享站。
在本文中，我们将探讨如何使用JQuery来实现一个表格（table）的行折叠效果，并以JSON数据作为数据源。这个功能对于展示大量信息时非常有用，因为它允许用户以交互方式展开或折叠表格中的行，从而控制显示的内容量。 ...
在IT行业中，分组折叠表格是一种常见的数据展示方式，它能有效地组织大量信息，使得用户可以更方便地浏览和理解。在这个"封装好的分组折叠表格"中，我们可以看到几个关键组件和概念，它们分别是`ListView`、`...
在IT领域，特别是前端开发中，"树型表格可以下拉折叠"是一个常见的交互设计模式，主要用于展示层次结构的数据。这种设计允许用户以更清晰、更直观的方式查看和操作复杂的数据结构。在本例中，它与jQuery库相结合，...
showTableToggleBtn: false // 是否显示表格折叠按钮 }); ``` 以上就是使用 FlexiGrid 实现类似 ExtJS 表格效果的基本步骤和配置选项。由于 FlexiGrid 的文档主要集中在 PHP 和 Java 示例上，对于使用其他后端技术...
axure,菜单,Tab切换、可折叠菜单、表格，登陆页面高保真模型
折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单窗口 创建窗口工具栏 窗口与布局 创建对话框窗口 自定义工具条和按钮 树形菜单 使用标签创建树形菜单 创建异步树形菜单...
本话题主要聚焦于如何利用Axure实现"随意折叠和展开"的效果，这类似于jQuery中的淡入淡出效果，能够增强用户界面的互动性和用户体验。 首先，我们需要理解“折叠和展开”这一概念。在网页或应用程序设计中，折叠和...
它们演示了如何实现一个可折叠的表格，并结合懒加载功能，使大量数据的处理更为高效。 首先，折叠表格允许用户按需查看详细信息，只显示基本信息，从而减少页面初始加载时的数据量。在HTML中，我们可以使用`...
在本文中，我们将深入探讨如何在DataTables中实现行分组信息的展开与折叠功能。DataTables是一款强大的JavaScript库，用于增强HTML表格的功能，提供排序、过滤、分页等多种高级特性。行分组功能允许用户将相关的数据...
django-foldable-admin允许折叠/扩展应用程序部分。 :skull_and_crossbones: 此项目不再受支持 :skull_and_crossbones: 要求： Django> = 1.8（自Django> = 2起未在新版本上进行测试） Python 2.7或> = 3.3...