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

我有一个非常长的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的显示/隐藏特性来最小化表，但仍然显示部分顶行和底行。中间的行应该替换为“showfulltable”这样的文本，单击时将展开以从头到尾显示完整的表

在jQuery中实现这一点的最佳方法是什么

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

[EDIT]添加了工作示例HTML，灵感来自巴拉德发布的答案

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

如果关闭Javascript，只显示完整的表会很好地降低性能。如果启用Javascript，则会隐藏中间表行并添加显示/隐藏链接

示例使用jQuery显示/隐藏表的中间行
$（文档）.ready（函数（）{
$（“#HiddenRowsNotice”）.html（“”）；
$（“#HiddenRows”）.hide（）；
$（'#ShowHide，#HiddenRowsNotice'）。单击（函数（）{
$（'#HiddenRows'）.toggle（）；
$（'HiddenRowsNotice'）.toggle（）；
});
});
月份名称月份
1月1日
Feb2
三月三日
四月四日
5月5日

---

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

最简单的方法是在中添加一个

来对行进行分组，并在

none

和

表行组

之间切换（捕捉异常并将其设置为IE的

block

）。不确定是否将其特定于jquery，但这是“正常”的处理方式。

类似的方法可能会奏效：

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

第1列第2列
第1列第2列
淀粉化
第1列第2列
第1列第2列
第1列第2列
末端隐藏
第1列第2列
第1列第2列
$（“#某物”）。单击（函数（）{
$（'.Table_Middle'）.hide（）；
$（'.Show_行'）.Show（）；
});
$（'.Show_Rows'）。单击（函数（）{
$（'.Show_Rows'）.hide（）；
$（'.Table_Middle'）.show（）；
});

我可能会这样做：

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

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

---

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

如果你给中间的

标记“

Table\u middle

”类，这会使操作更容易。然后只需要几行jQuery。一个用于添加“ShowFullTable”行，另一个用于为该行添加单击侦听器。确保将

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

//jQuery链接在这里很有用
$（“.Table_Middle”）.hide（）
.eq（0）
。之前（“显示完整表格”）；
$（“.showFull”）。单击（函数（）{
$（this.toggle（）；
$（“.Table_Middle”）.toggle（）；
});

---

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

这里有一个解决方案，它不需要任何额外的标记，并且性能会很好地降低

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

尝试使用slice（）方法：

---

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

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

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

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

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