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

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

49 голосов
/ 18 октября 2008

У меня очень длинная таблица из 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" к некоторым строкам, но он не скрывает его полностью, пространство, которое он занимал, все еще там, и у меня нет текста, чтобы дать пользователю способ полностью разверните стол.

[EDIT] Добавлен рабочий пример HTML, вдохновленный опубликованным ответом Parand

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

[РЕДАКТИРОВАТЬ] Ссылка на мое сообщение в блоге и рабочий пример.

Ответы [ 6 ]

56 голосов
/ 18 октября 2008

Примерно так может работать: 

<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();
});
4 голосов
/ 24 октября 2009

Попробуйте использовать метод slice (): 

$("#table tr").slice(1, 4).hide();
4 голосов
/ 20 октября 2008

Вот решение, которое не требует какой-либо дополнительной разметки и хорошо ухудшается. 

<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()
                ;
            })
        )
    ;
}
4 голосов
/ 18 октября 2008

Самый простой способ - добавить <tbody>, чтобы сгруппировать строки и переключить его между none и table-row-group (перехватывать исключения и устанавливать для block для IE). Не уверен насчет того, чтобы сделать его специфичным для jquery, но это «нормальный» способ ведения дел.

2 голосов
/ 18 октября 2008

Если вы дадите своим средним <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 отключен (или любой другой сценарий, который может привести к тому, что этот код не будет поддерживаться), строка «Показать полную таблицу» отсутствует.

1 голос
/ 18 октября 2008

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

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

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

...