如何使用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();
    });

});