如何使用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();
});

最简单的方法是添加 <tbody> 在中对行进行分组并在 none 和 table-row-group (捕获异常并将其设置为 block 对于IE)。不确定它是否特定于jquery,但这是做事情的“正常”方式。

这是一个不需要任何额外标记的解决方案,它会很好地降低性能。

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

尝试使用slice()方法:

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

如果你把你的中间 <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(或者任何其他可能导致此代码不受支持的方案),则没有“显示完整表”行。

我可能会这样做:

<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 document ready函数隐藏它们,并创建包含链接的行。

另外,给行隐藏特定类的方法也应该有效。jQuery看起来像这样:

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

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