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

Самый легкий путь состоит в том, чтобы добавить <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... У меня есть hardcoded в нескольких вещах здесь (как идентификатор таблицы, количество строк для показа, и т.д. Они могли быть помещены в 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()
                ;
            })
        )
    ;
}

При предоставлении середины <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 готовая функция, и также создать строку со ссылкой в.

кроме того, Ваш метод предоставления строк для сокрытия конкретного класса должен также работать. JQuery выглядел бы примерно так:

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

необходимо было бы все еще создать строку со ссылкой для вывода на экран их все же.

Try to use slice() method:

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