html嵌套表隐藏或显示表最后td通过单击表格第一个td | html嵌套表隐藏或显示表最后td通过单击表格第一个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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！