如何使用jQuery隱藏/顯示表行？

Question

我有一個Zend Framework（PHP）Web應用程序，它有一個包含很多行的表。

• 99.9％的時間，用戶將在第一行或第二行采取行動。
• 00.1％的時間，用戶需要返回並對另一行采取行動。

因此，我只需要在頁面加載時顯示前幾行，並為歷史記錄保留其余行。

我想以某種方式縮短這張桌子。 我在想，使用jQuery，可能會顯示前5行顯示的內容（其余部分是隱藏的），而在表格的底部，有一個鏈接可顯示5行。

替代文字http://img64.imageshack.us/img64/2479/5rowtable.png

你怎么看？ 我怎么能用jQuery實現這個目標？

Answer 1

我就是這樣做的（ 這里演示 ）：

腳本

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

});

Answer 2

我知道這是一個舊線程，但以防萬一其他人正在搜索我寫了這個腳本：

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

});

Answer 3

當然你可以用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隱藏/顯示效果對於表組件可能有點奇怪。 如果是這樣，將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;
  });
});

當然，你不會以這種方式獲得好的效果。