我正在做一个项目,我希望在嵌套表结构中显示数据,如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>
答案 0 :(得分:0)
在您的选择器中使用td:first
选择第一个td,并parent().next()
切换下一个tr
试试这个
$(".toptable tr.accordion td:first").click(function(){
//--^^^^^^^^---here
$(this).parent().next().fadeToggle();
//----^^^^^^^^^---here
});
<强>更新强>
在下面的评论
之后它不适用于第二行。如果我首先点击第二行td它必须显示其他表格行。
试试这个
$(".toptable tr").find('td:first').click(function(){
$(this).parent().next().fadeToggle();
});