html嵌套表格通过先单击表格行td隐藏或显示表格行
html嵌套表格通过先单击表格行td隐藏或显示表格行
提问于 2013-07-15 14:54:42
我正在做一个项目，其中我希望以嵌套表结构显示数据，就像在link中一样
http://www.aspdotnet-suresh.com/2012/05/gridview-with-in-gridview-or-nested.html
在这方面，请检查下演示。它是在asp.net的网格视图中实现的。但我正在尝试用html实现。我得到了解决方案，但问题是，在该表中，如果我单击行中的任何位置，它都会显示下一行。但是我需要首先点击tr的td，然后只需显示tr，否则什么都不显示，
我的html代码如下。请任何人帮帮我。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
$(".toptable > tbody > tr:not(.accordion)").hide();
$(".toptable tr:first-child").show();
$(".toptable tr.accordion").click(function(){
$(this).next().fadeToggle();
});
});
</script>
</head>
<body>
<table class="toptable" border="1">
<tbody>
<tr class="accordion">
<td class="id1">TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<table class="nested" border="1" >
<tbody>
<tr>
<td>nestedTD1</td>
<td>nestedTD2</td>
</tr>
<tr>
<td>nestedTD3</td>
<td>nestedTD4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="accordion">
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<table class="nested" border="1" >
<tbody>
<tr>
<td>nestedTD1</td>
</tr>
<tr>
<td>nestedTD3</td>
</tr>
</tbody>
</table>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17648309
复制相关文章
相似问题