<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("tr[aa='aa']").bind("click", function(){
var display = $(this).attr('display');
if (display == 'block'){
$('tr[pid='+$(this).attr('id')+']').hide();
$(this).removeAttr('display');
}else{
$('tr[pid='+$(this).attr('id')+']').show();
$(this).attr('display','block');
}
})
})
</script>
</head>
<body>
<table border="1" cellSpacing="0" cellPadding="0">
<thead>
<tr>
<td>姓名</td>
<td>日期</td>
<td>金额</td>
<td>说明</td>
</tr>
</thead>
<tbody>
<tr id="11" aa="aa">
<td colspan ="4">
Common
</td>
</tr>
<tr pid="11" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr pid="11" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr id="12" aa="aa">
<td colspan ="4">
Action
</td>
</tr>
<tr pid="12" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr pid="12" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr id="13" aa="aa">
<td colspan ="4">
TransAction
</td>
</tr>
<tr pid="13" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr pid="13" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr id="14" aa="aa">
<td colspan ="4">
Action
</td>
</tr>
<tr pid="14" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr pid="14" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr id="15" aa="aa">
<td colspan ="4">
Workflow
</td>
</tr>
<tr pid="15" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
<tr pid="15" style="display:none;">
<td>A股</td>
<td>A股</td>
<td>A股</td>
<td>A股</td>
</tr>
</tbody>
</table>
</body>
<!-- http://www.yto.net.cn/cn/service/index.html -->
</html>
分享到：
相关推荐
《TableTree：构建表格树形结构的实现与应用》 在数据展示中，有时我们需要将层级关系的数据以表格的形式呈现，这时，表格树形结构（TableTree）就显得尤为重要。它将传统二维表格与树状结构相结合，既保留了表格的...
在"boostrapTable表格树"这个主题中，我们将深入探讨如何使用BootstrapTable实现表格树结构，以及它在实际项目中的应用。 BootstrapTable表格树是一种特殊的表格展示方式，它将数据以层次结构的形式展现，通常用于...
"带复选框的表格树"是一种常见的组件，它结合了表格和树形结构的优点，为用户提供了一种直观的方式来组织和操作数据。这个组件允许用户通过复选框进行多选操作，适用于数据层级关系复杂、需要批量处理的场景，如权限...
《jQuery插件——表格树GridTree(后台分页版本20091018)详解》 在Web开发中，展示数据的方式多种多样，其中表格由于其清晰、直观的特点，被广泛应用于数据呈现。然而，当数据量较大时，单纯的表格可能会显得过于...
本文将深入探讨“前端组件推荐表格树验证等”这一主题，包括表单验证、表格展示、弹窗设计以及时间选择、文件上传、下拉树和下拉框等常见功能的实现。 首先，表单验证是任何交互式应用的基础部分，它确保用户输入的...
**jQuery表格树插件详解** 在网页开发中，表格是一种常用的数据展示方式，但随着数据结构的复杂化，普通的二维表格往往无法满足需求。这时，jQuery表格树（jQuery TreeTable）就应运而生，它将传统的表格扩展为可...
**jQuery表格树插件详解** 在网页开发中，表格数据的展示经常需要处理大量结构化的信息，而将这些数据组织成树形结构可以更清晰地展现层级关系，提高用户的浏览体验。`jQuery表格树插件`就是为此目的设计的工具，它...
表格树是一种特殊的数据显示结构，它将表格数据与树形结构相结合，使得数据的层次关系更加清晰，便于用户理解和操作。这种技术广泛应用于管理信息系统、数据分析软件以及各种Web应用中，尤其是那些需要展示层级关系...
懒加载版本表格树是一种高效的数据显示技术，特别是在处理大数据量时尤为有用。在传统的表格或树形数据展示中，所有数据通常在初次加载时一次性加载到内存中，这可能导致页面加载速度慢，对用户来说响应时间长，特别...
《jQuery懒加载版本表格树GridTree详解》 在IT领域，高效的数据呈现是提升用户体验的关键。面对大数据量的处理，传统的加载方式往往会导致页面加载缓慢，用户体验下降。为解决这一问题，"jQuery懒加载版本表格树...
《jQuery表格树插件GridTree懒加载版本：高效处理大数据量的解决方案》 在Web开发中，处理大数据量的表格往往是一项挑战。传统的表格展示方式可能导致页面加载缓慢，用户体验下降。为了解决这一问题，出现了jQuery...
《layui异步表格树插件：打造高效大数据量树型表格》 layui是一款优秀的前端UI框架，以其简洁、高效的特性深受开发者喜爱。在处理大数据量的树型表格时，layui的异步表格树插件（tableTree）成为了一个理想的选择。...
《jQuery插件——表格树GridTree详解》 在网页开发中，数据的展示方式多种多样，其中表格和树形结构是常见的两种。当这两种元素结合在一起时，就形成了表格树，这种布局方式既能清晰地展示层次关系，又能有效利用...
**表格树结合示例** 在Java Swing中，有时我们需要同时展示表格和树的数据。这可以通过嵌套JScrollPane或自定义布局管理器来实现。一个常见的场景是，当用户在JTree中选择一个节点时，JTable会更新显示与该节点相关...
本设计源码提供了一个基于Layui的表格树形结构展示组件，包含53个文件，其中包括24个js脚本文件，5个css样式文件，4个md文档，4个json数据文件，3个gif图片文件，2个png图片文件，2个php源文件，2个html页面文件，...
在IT行业中，前端开发是构建用户界面的关键环节，而编辑器、日历、表格、表单、表格树和图表是常见的交互元素，用于提供丰富的用户体验。以下是对这些元素的详细解释： 1. **编辑器**：编辑器是网页中用于文本输入...