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

我就是这样做的（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 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;
  });
});

当然，你不会以这种方式获得好的效果。

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

3 个答案: