0

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

请参阅下面的代码。它是在 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>

4

5 回答 5

0

试试下面的代码

 $(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/上的示例

于 2013-07-15T10:06:40.417 回答
0

好的，我想我明白你在说什么.. 使用兄弟姐妹（）而不是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>是无效的..改变那个

工作小提琴

于 2013-07-15T10:29:46.917 回答
0

更新答案

检查这个演示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>

查询

$(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();
        }
    });
});
于 2013-07-15T10:30:14.503 回答
0

首先，您的 html 不正确，请删除<tr><td colspan="3"> and </td></tr> http://jsfiddle.net/code_rum/aBWFY/

您可以使用 last:child 而不是使用 class 找到您的 td

$(function () {

    $(".toptable > tbody > tr > td:not(.n1)").hide();
    $(".toptable tr").find('td:first').click(function () {
  $(this).siblings(':last-child').show();
    });
});
于 2013-07-15T10:36:34.400 回答
0

我制作了一个完整的主详细信息表演示，因为这是我所理解的。因为我希望它可能有用，所以我还是把它贴在这里。

代码真的很简单。该类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)

我将上面的演示分叉到这个工作演示中，其中详细信息显示在最后一个单元格中

更新的主详细信息 - 最后一列中显示的详细信息

于 2013-07-15T11:56:27.240 回答