Question

我想在嵌套表结构中显示数据（请查看以下链接）

请参阅下面的代码。它是在asp.net的网格视图中实现的，但我试图在html中实现。

问题是：

如果我点击第一个表格单元格（td），则应显示最后一个td。
目前它不显示最后一个td
最初应该隐藏最后一个td。

请帮帮我。

<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>

Answer 1

尝试以下代码

 $(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/

上的样本

Answer 2

好吧我想我得到了你说的...使用兄弟姐妹（）而不是find()

试试这个

  $(function() {
        $(".toptable > tbody > tr > td:not(.n1)").hide();
        $(".toptable tr").find('td:first').click(function() {
            $(this).siblings('.nested').show(); // or  $(this).siblings().last().show(); 
        });
    });

并且您<tr>内的<td>无效。更改

working fiddle

Answer 3

更新答案

查看此演示http://jsfiddle.net/yeyene/CaP23/1/

如果要将隐藏行显示为新行，则需要像这样修改html。

HTML

<table class="toptable" border="1">
    <tbody>
        <tr class="accordion">
            <td class="showHide">+</td>
            <td class="id1 n1">TD1</td>
            <td class="id1 n1">TD2</td>
            <td class="id1 n1">TD3</td>
        </tr>
        <tr class="nested">
            <td colspan="4">
                <table border="1">
                    <tbody>
                        <tr>
                            <td>nestedTD1</td>
                            <td>nestedTD2</td>
                        </tr>
                        <tr>
                            <td>nestedTD3</td>
                            <td>nestedTD4</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

JQUERY

$(document).ready(function () {
    $(".toptable tr.nested").hide();
    $(".toptable td.showHide").on('click',function () {
        if($(this).html() == '+'){
            $(this).html('-');
            $(this).parent('tr').next('tr.nested').show();
        }
        else{
            $(this).html('+');
            $(this).parent('tr').next('tr.nested').hide();
        }
    });
});

Answer 4

首先你的html不合适请删除<tr><td colspan="3"> and </td></tr> http://jsfiddle.net/code_rum/aBWFY/

您可以使用last：child

，而不是使用类找到您的td

$(function () {

    $(".toptable > tbody > tr > td:not(.n1)").hide();
    $(".toptable tr").find('td:first').click(function () {
  $(this).siblings(':last-child').show();
    });
});

Answer 5

我做了 fully working demo of a master detail table ，因为这是我所理解的。因为我希望它可能有用，我会在这里发布它。

代码非常简单。课程hiddenRow定义为：.hiddenRow {display: none;}。如果用户点击该类被删除的按钮。

<tr class="accordion">
      <td class="id1 n1">
        <button onClick="showDetail('#m1-detail');">show detail</button>
      </td>
      <td class="id1 n1">master row 1</td>
      <td class="id1 n1">some </td>
      <td class="nested">information</td>
</tr>
<tr id="m1-detail" class="hiddenRow">
   ....
</tr>

该函数使用jquery，看起来像这样

function showDetail(selector)
{
  // if the class is already there remove it else add it         
  if($(selector).hasClass("hiddenRow")){
    $(selector).removeClass("hiddenRow");
  }else {
    $(selector).addClass("hiddenRow");
  }      
};

更新 - 详细信息显示在表格行的最后一个单元格（td）中

我将上面的演示分为 working demo where details are displayed in last cell

updated master detail - detail shown in last column

html嵌套表隐藏或显示表最后一个td通过单击表行第一个td

5 个答案:

更新答案

HTML

JQUERY

更新 - 详细信息显示在表格行的最后一个单元格（td）中