Как скрыть середину таблицы с помощью jQuery?

Самый простой способ - добавить <tbody>, чтобы сгруппировать строки и переключить его между none и table-row-group (перехватить исключения и установить для него значение block для IE). Не уверен, что нужно делать это специально для 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();
});

Я бы сделал это, наверное, так:

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

Тем не менее, вам все равно нужно создать строку со ссылкой, чтобы отобразить их.

Если вы дадите своим средним тегам <tr /> класс «Table_Middle», это значительно упростит задачу. Тогда потребуется всего несколько строк jQuery. Один для добавления строки «Показать полную таблицу», а другой - для добавления прослушивателя кликов для этой строки. Не забудьте изменить значение «X» атрибута colspan на количество столбцов в вашей таблице.

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