Как скрыть / показать строки таблицы, используя jQuery? - PullRequest
Новая
       16

Как скрыть / показать строки таблицы, используя jQuery?

5 голосов
/ 20 декабря 2009

У меня есть веб-приложение Zend Framework (PHP), в котором есть таблица с большим количеством строк.

  • 99,9% времени пользователь будет выполнять действия в первой или второй строке.
  • 00,1% времени, пользователь должен будет вернуться назад и выполнить действие в другом ряду.

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

Я бы хотел как-нибудь сократить таблицу. Я думаю, используя jQuery, возможно, сделать что-то, где отображаются первые 5 строк (остальные скрыты), а внизу таблицы есть ссылка для отображения еще 5 строк.

альтернативный текст http://img64.imageshack.us/img64/2479/5rowtable.png

Что ты думаешь? Как я могу добиться этого с помощью jQuery?

Ответы [ 3 ]

23 голосов
/ 20 декабря 2009

Вот как бы я это сделал ( демо здесь ):

Сценарий 

var numShown = 5; // Initial rows shown & index
var numMore = 5;  // Increment

var $table = $('table').find('tbody');  // tbody containing all the rows
var numRows = $table.find('tr').length; // Total # rows

$(function () {
    // Hide rows and add clickable div
    $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<tbody id="more"><tr><td colspan="' +
               $table.find('tr:first td').length + '"><div>Show <span>' +
               numMore + '</span> More</div</tbody></td></tr>');

    $('#more').click(function() {
        numShown = numShown + numMore;
        // no more "show more" if done
        if (numShown >= numRows) {
            $('#more').remove();
        }
        // change rows remaining if less than increment
        if (numRows - numShown < numMore) {
            $('#more span').html(numRows - numShown);
        }
        $table.find('tr:lt(' + numShown + ')').show();
    });

});
2 голосов
/ 14 августа 2012

Я знаю, что это старая ветка, но на всякий случай, если кто-то еще ищет, я написал этот скрипт: 

$(function() {
/* initial variables */
var numRows = $('#ticketLinesTable').find('tr').length;
var SHOWN = 5;
var MORE = 20;

/* get how many more can be shown */
var getNumMore = function(ns) {
    var more = MORE;
    var leftOver = numRows - ns;
    if((leftOver) < more) {
        more = leftOver;
    }
    return more;
}
/* how many are shown */
var getInitialNumShown = function() {
    var shown = SHOWN;
    if(numRows < shown) {
        shown = numRows;
    }
    return shown;
}
/* set how many are initially shown */
var numShown = getInitialNumShown();

/* set the numMore if less than 20 */
var numMore = getNumMore(numShown);

/* set more html */
if(numMore > 0) {
    var more_html = '<p><button id="more">Show <span style="font-weight: bold;">' + numMore + '</span> More...</button></p>';
    $('#ticketLinesTable').find('tr:gt(' + (numShown - 1) + ')').hide().end().after(more_html);
}
$('#more').click(function(){
    /* determine how much more we should update */
    numMore = getNumMore(numShown);
    /* update num shown */
    numShown = numShown + numMore;
    $('#ticketLinesTable').find('tr:lt('+numShown+')').show();

    /* determine if to show more and how much left over */
    numMore = getNumMore(numShown);
    if(numMore > 0) {
        $('#more span').html(numMore);
    }
    else {
        $('#more').remove();
    }
});

});
1 голос
/ 20 декабря 2009

Конечно, вы можете сделать это с помощью jQuery. Я бы, наверное, сделал это так: 

<table>
<tbody id="new">
  <tr>...</tr> <!-- x5 -->
  <tr><td><a href="#" id="toggle">Show Old</a></td></tr>
</tbody>
<tbody id="old">
  ...
</tbody>
</table>

Загрузите их скрытыми с помощью CSS: 

#old { display: none; }

и 

$(function() {
  $("#toggle").click(function() {
    if ($("#old").is(":hidden")) {
      $(this).text("Hide Old");
    } else {
      $(this).text("Show Old");
    }
    $("#old").slideToggle();
    return false;
  });
});

Однако эффекты jQuery hide / show могут быть немного странными с компонентами таблицы. Если это так, измените CSS на это: 

#old.hidden { display: none; }

и 

$(function() {
  $("toggle").click(function() {
    if ($("#old").hasClass("hidden")) {
      $(this).text("Hide Old");
    } else {
      $(this).text("Show Old");
    }
    $(this).toggleClass("hidden");
    return false;
  });
});

Конечно, вы не получите хорошие эффекты таким образом.

...