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

我有一个Zend Framework（PHP）web应用程序，它有一个包含许多行的表

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

因此，我只需要在页面加载时显示前几行，并为了历史的缘故保留其余的行

我想设法缩短桌子。我在想，使用jQuery，也许可以在显示前5行（其余的隐藏）的地方做一些事情，在表的底部，有一个链接可以显示更多的5行

---

你觉得怎么样？我如何用jQuery实现这一点？

当然可以用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>

以及：

然而，jQuery隐藏/显示效果对于表组件可能有点奇怪。如果是，请将CSS更改为：

#old.hidden { display: none; } 

以及：

---

当然，这样做效果不好。

我会这样做（）：

剧本

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

});

var numShown=5；//显示初始行和索引
var numMore=5；//增量
变量$table=$（'table'）。查找（'tbody'）；//t包含所有行的正文
var numRows=$table.find（'tr'）.length；//总计#行
$（函数（）{
//隐藏行并添加可单击的div
$table.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）
.在（'Show'+
numMore+'More我知道这是一个旧线程，但为了防止其他人搜索，我编写了以下脚本：

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

});

$（函数（）{
/*初始变量*/
var numRows=$（'#ticketLinesTable'）.find（'tr'）.length；
所示var=5；
var MORE=20；
/*了解还可以显示多少*/
var getNumMore=函数（ns）{
var more=更多；
var剩余=numRows-ns；
如果（（剩余）<更多）{
更多=剩余；
}
回报更多；
}
/*显示了多少个*/
var getInitialNumShown=函数（）{
显示的变量=显示的变量；
如果（numRows<显示）{
显示=numRows；
}
返回显示；
}
/*设置初始显示的数量*/
var numShown=getInitialNumShown（）；
/*如果小于20，则设置numMore*/
var numMore=getNumMore（numShown）；
/*设置更多html*/
如果（numMore>0）{
var more_html='Show'+numMore+'more…
'；
$（'#ticketLinesTable'）.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）.after（更多html）；
}
$（“#更多”）。单击（函数（）{
/*确定我们还应该更新多少*/
numMore=getNumMore（numShown）；
/*显示更新编号*/
numShown=numShown+numMore；
$（'#ticketLinesTable'）.find（'tr:lt（'+numShown+'））.show（）；
/*确定是否显示更多内容以及剩余的内容*/
numMore=getNumMore（numShown）；
如果（numMore>0）{
$（'#more span'）.html（numMore）；
}
否则{
$（“#更多”）.remove（）；
}
});
});
当然，缺点是您需要加载所有这些行，然后隐藏它们。对于带宽使用，一些ajax不是更好的做法吗？：）同意，并且您是否注意到StackOverflow会使用相同的客户端处理来隐藏忽略的标记？
.end（）
在
.hide（）
之后做什么

将选择还原为上一个选择…因此在本例中，选择器返回到

$（'table'）

。请在此处阅读更多信息（），还有

.andSelf（）

选择器（）

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

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

});

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

});