html嵌套表通过首先单击表行来隐藏或显示表行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (122)

我正在做一个项目,我希望在嵌套表结构中显示数据,就像链接中的一样(http://www.aspdotnet-suresh.com/2012/05/gridview-with-in-gridview-or-nested.html)。

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>
提问于
用户回答回答于

在选择器中使用td:first以选择第一个td,并使用parent().next()切换下一个tr

尝试这个

 $(".toptable tr.accordion td:first").click(function(){
                       //--^^^^^^^^---here
     $(this).parent().next().fadeToggle();
      //----^^^^^^^^^---here
});
$(".toptable tr").find('td:first').click(function(){
     $(this).parent().next().fadeToggle();
});

http://jsfiddle.net/bipen/TtWTR/3/

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励