如何使用 jQuery 隐藏/显示表格行？

Question

我有一个 Zend Framework (PHP) Web 应用程序，它有一个包含很多行的表。

• 99.9% 的时间，用户将在第一行或第二行执行操作。
• 00.1% 的时间，用户需要返回并在不同的行上执行操作。

所以我真的只需要在页面加载时显示前几行，并为历史记录保留其余行。

我想以某种方式缩短表格。我在想，使用 jQuery，也许可以做一些显示前 5 行的事情（其余的被隐藏），并且在表格的底部，有一个链接可以显示另外 5 行。

alt text http://img64.imageshack.us/img64/2479/5rowtable.png

你怎么看？我怎样才能用 jQuery 实现这一点？

Answer 1

当然你可以用 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;
  });
});

当然这样你不会得到好的效果。

Answer 2

这就是我的做法 (demo here)：

脚本

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 3

我知道这是一个旧线程，但以防万一其他人正在搜索我写了这个脚本：

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

});