如何使用 jQuery 隐藏表格的中间？答案

【问题标题】：How do I hide the middle of a table using jQuery?如何使用 jQuery 隐藏表格的中间？
【发布时间】：2010-09-17 22:20:25
【问题描述】：

我有一个很长的 3 列表。我愿意

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

这是我尝试使用 jQuery 获得的结果。

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

我想使用 jQuery 的显示/隐藏功能来最小化表格，但仍然显示顶部和底部行的一部分。中间行应替换为“显示完整表格”之类的文本，单击时将展开以显示从开始到结束的完整表格。

在 jQuery 中最好的方法是什么？

顺便说一句，我已经尝试在某些行中添加一个类“Table_Middle”，但它并没有完全隐藏它，它占用的空间仍然存在，而且我没有文本给用户一种方法完全展开表格。

[编辑] 添加了受 Parand 发布的答案启发的工作示例 HTML

下面的例子是一个完整的工作例子，你甚至不需要下载 jquery。只需粘贴到一个空白的 HTML 文件中。

如果关闭 Javascript，它会很好地降级以仅显示完整的表格。如果 Javascript 已打开，则它会隐藏中间表格行并添加显示/隐藏链接。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
                $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
                $("#HiddenRows").hide();

                $('#ShowHide,#HiddenRowsNotice').click( function() {
                    $('#HiddenRows').toggle();  
                    $('#HiddenRowsNotice').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr>
            <tbody>
                <tr><td>Jan</td><td>1</td></tr>    
            </tbody>
            <tbody id="HiddenRowsNotice"></tbody>
            <tbody id="HiddenRows">
                <tr><td>Feb</td><td>2</td></tr>
                <tr><td>Mar</td><td>3</td></tr>
                <tr><td>Apr</td><td>4</td></tr>    
            </tbody>
            <tbody>
                <tr><td>May</td><td>5</td></tr>            
            </tbody>
        </table>
    </body>
</html>

[编辑] 链接我的blog post 和工作示例。

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

尝试使用 slice() 方法：

$("#table tr").slice(1, 4).hide();

【讨论】：

【解决方案2】：

这是一个不需要任何额外标记的解决方案，它可以很好地降级。

<table id="myTable">
    <tbody>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

和 jQuery...我在这里硬编码了一些东西（比如表格标识符、要显示的行数等。如果你想要的话，这些可以放在表格上的 class 属性中更可重用。（例如：<table class="hidey_2">）

var showTopAndBottom = 2,
    minRows = 4,
    $rows = $('#myTable tr').length),
    length = $rows.length
;
if (length > minRows) {
    $rows
        .slice(showTopAndBottom, length - showTopAndBottom)
        .hide()
    ;
    $rows
        .eq(showTopAndBottom - 1)
        .after(
            // this colspan could be worked out by counting the cells in another row
            $("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
                $(this)
                    .remove()
                    .nextAll()
                    .show()
                ;
            })
        )
    ;
}

【讨论】：

【解决方案3】：

这样的事情可能会奏效：

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>


$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});

【讨论】：

【解决方案4】：

如果你给你的中间<tr /> 标签添加“Table_Middle”类，它会更容易做到。然后只需要几行jQuery。一个添加“显示完整表”行，另一个添加该行的单击侦听器。确保将colspan 属性的“X”值更改为表中的列数。

 // jQuery chaining is useful here
 $(".Table_Middle").hide()
                   .eq(0)
                   .before('<tr colspan="X" class="showFull">Show Full Table<tr/>');

$(".showFull").click(function() {
    $(this).toggle();
    $(".Table_Middle").toggle();
});

这很有用，因为它可以很好地降级并且可以跨许多浏览器/设备访问。如果 JavaScript 被关闭，或 CSS 被禁用（或任何其他可能导致此代码不受支持的情况），则没有“显示完整表格”行。

【讨论】：

你测试过这个吗？我认为 get 方法返回一个 DOM 对象，而不是 jquery 对象，并且我认为您只是隐藏了第一行 Table_Middle 因为在 get 之后调用了 hide。我也没有测试过它，但如果我是对的，那么它需要稍微重新安排才能工作。
你是对的。我不敢相信我错过了。 “get()”返回一个 DOM 对象。我已经更新了我的代码示例以确认这一点。
您可以只使用 .eq(0) 而不是 .get(0) 来返回 jQuery 而不是 DOM 元素。但这完全是最好的答案。

【解决方案5】：

我可能会这样做：

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody id="hidden-rows">
        <tr>
            <td colspan="3">
                <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
                    Show hidden rows
                </a>
            </td>
        </tr>
    </tbody>
    <tbody id="extra-rows" style="display: none;">
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
</table>

这不是一个好方法，因为它不会很好地降解。

为了让它很好地降级，你必须首先显示所有行，然后用你的 jQuery 文档准备函数隐藏它们，并创建包含链接的行。

此外，您提供隐藏特定类的行的方法也应该有效。 jQuery 看起来像这样：

$(document).ready(function() {
    $('tr.Table_Middle').hide();
});

您仍然需要创建带有链接的行才能取消隐藏它们。

【讨论】：

【解决方案6】：

最简单的方法是添加一个<tbody> 来对行进行分组并在none 和table-row-group 之间切换（捕获异常并将其设置为block 对于IE）。不确定是否使其特定于 jquery，但这是“正常”的做事方式。

【讨论】：