49

我有一个很长的 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>

[编辑] 链接我的博客文章和工作示例。

4

6 回答 6

56

像这样的东西可以工作：

<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();
});
于 2008-10-18T16:33:00.390 回答
4

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

于 2008-10-18T16:27:43.303 回答
4

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

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

class和 jQuery ......我在这里硬编码了一些东西（比如表标识符，要显示的行数等。如果你希望它更可重用，这些可以放入表上的属性中。（例如:) <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()
                ;
            })
        )
    ;
}
于 2008-10-20T01:39:34.517 回答
4

尝试使用 slice() 方法：

$("#table tr").slice(1, 4).hide();
于 2009-10-23T20:05:33.507 回答
2

如果你给你的中间<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 被禁用（或任何其他可能导致此代码不受支持的情况），则没有“显示完整表格”行。

于 2008-10-18T16:40:00.737 回答
1

我可能会这样做：

<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();
});

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

于 2008-10-18T16:35:38.530 回答