html嵌套表隐藏或显示表最后td通过单击表格第一个td [英] html nested table hide or show table last td by clicking table row first td
本文介绍了html嵌套表隐藏或显示表最后td通过单击表格第一个td的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在嵌套表格结构中显示数据（请检查以下链接）
请参阅下面的代码。它是在asp.net中的网格视图中实现的。但我试图在HTML中实现。
问题在于如果我点击第一个表格单元格（
- td）应显示最后一个td。
- 目前它不显示最后一个td
- 最后一个td应该是隐藏的。
请帮助我。
< HEAD>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>< / script>
< script>
$（。toptable> tbody> tr> td：not（.n1））。hide（）;
$（。toptable （'td：first'）。click（function（）{
$（this）.find（'td：last'）。show（）;
}）;
}）;
< / script>
< / head>
< body>
< table class =toptableborder =1>
< tbody>
< tr class =accordion>
< td class =id1 n1> TD1< / td>
< td class =id1 n1> TD2< / td>
< td class =id1 n1> TD3< / td>
< td class =nested>
< tr>
< td colspan =3>
< table border =1>
< tbody>
< tr>
< td> nestedTD1< / td>
< td> nestedTD2< / td>
< / tr>
< tr>
< td> nestedTD3< / td>
< td> nestedTD4< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< / td>
< / tr>
< tr class =accordion>
< td class =id1 n1> TD1< / td>
< td class =id1 n1> TD2< / td>
< td class =id1 n1> TD3< / td>
< td class =nested>
< tr>
< td colspan =3>
< table border =1>
< tbody>
< tr>
< td> nestedTD1< / td>
< / tr>
< tr>
< td> nestedTD3< / td>
< / tr>
< / tbody>
< / table>
< / td>
< / tr>
< / td>
< / tr>
< / tbody>
< / table>
< / body>
解决方案
尝试下面的代码
$（function（）{
$（。toptable> tbody> ; tr（> td：not（.n1））。hide（）;
$（。toptable tr）。find（td：first）。click（function（）{
$（this）.closest（'tr'）。children（'td：last'）。show（）;
}）;
}）;
另请参阅jsfiddle http://jsfiddle.net/7Jfx7/1/
I want to display data in nested table structure (please check following link)
See my code below. It was implemented in grid view in asp.net. But i am trying to implementing in html.
The problem is
- if i am clicking in the first table cell (td) the last td should be shown.
- currently it does not display the last td
- initially last td should be hiden.
Please help me.
<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 > td:not(.n1)").hide();
$(".toptable tr").find('td:first').click(function() {
$(this).find('td:last').show();
});
});
</script>
</head>
<body>
<table class="toptable" border="1">
<tbody>
<tr class="accordion">
<td class="id1 n1">TD1</td>
<td class="id1 n1">TD2</td>
<td class="id1 n1">TD3</td>
<td class="nested">
<tr>
<td colspan="3">
<table border="1">
<tbody>
<tr>
<td>nestedTD1</td>
<td>nestedTD2</td>
</tr>
<tr>
<td>nestedTD3</td>
<td>nestedTD4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</td>
</tr>
<tr class="accordion">
<td class="id1 n1">TD1</td>
<td class="id1 n1">TD2</td>
<td class="id1 n1">TD3</td>
<td class="nested">
<tr>
<td colspan="3">
<table border="1">
<tbody>
<tr>
<td>nestedTD1</td>
</tr>
<tr>
<td>nestedTD3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</body>
解决方案
Try below code
$(function () {
$(".toptable > tbody > tr > td:not(.n1)").hide();
$(".toptable tr").find("td:first").click(function () {
$(this).closest('tr').children('td:last').show();
});
});
Also check sample on jsfiddle http://jsfiddle.net/7Jfx7/1/
这篇关于html嵌套表隐藏或显示表最后td通过单击表格第一个td的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
