Javascript 使用完全相同的show/hide jQuery，但使用两个表，而不是一个表

我在网上找到了它，它完全按照我想要的那样工作

但是，我想使用两个独立内容的表，而不仅仅是一个

是否有可能拥有相同的“查看5更多”功能，但有两个单独的表

这是如何实现的

以下是JavaScript供参考：

<script type="text/javascript">
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = $('table').find('tr').length; // Total # rows

$(document).ready(function(){
 // Hide rows and add clickable div
 $('table')
  .find('tr:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

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

})
</script>

var numShown=5；//显示初始行和索引
var numMore=5；//增量
var numRows=$（'table'）.find（'tr'）.length；//总计#行
$（文档）.ready（函数（）{
//隐藏行并添加可单击的div
$（“表”）
.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）
.在（'Show'+numMore+'More'）之后；
$（“#更多”）。单击（函数（）{
numShown=numShown+numMore；
//不再显示更多，如果完成
如果（numShown>=numRows）$（“#更多”）.remove（）；
//如果小于增量，则更改剩余行
if（numRows-numShown

---

非常感谢您的指点。

在每个表上放置特定的id属性，然后用#tableid的特定id选择器替换“table”的常规选择器

试试这个（未经测试）：

var numShown=5；//显示初始行和索引
var numMore=5；//增量
$（文档）.ready（函数（）{
$（'table'）。每个（函数（）{
var表=$（此）；
var numRows=table.find（'tr'）.length；//总计#行
//隐藏行并添加可单击的div
桌子
.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）
.在（'Show'+numMore+'More'）之后；
表。下一步（'.more'）。单击（函数（）{
var more=$（此）；
numShown=numShown+numMore；
//不再显示更多，如果完成
如果（numShown>=numRows）更多。删除（）；
//如果小于增量，则更改剩余行
if（numRows-numShown

var numShown=5；//显示初始行和索引
var numMore=5；//增量
$（文档）.ready（函数（）{
//隐藏行并添加可单击的div
$（'table'）.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）.after（'Show'+numMore'）；
$（'.more'）。单击（函数（）{
var numRows=$（this.prev（）.find（'tr'）.length；//总计#行
显示=$（this）.prev（）.find（'tr:visible'）.length+numMore；
//不再显示更多，如果完成
如果（显示>=numRows）$（此）.remove（）；
//如果小于增量，则更改剩余行
if（numRows-show

工作示例：

---

谢谢你把这些放在一起。不幸的是，“Show 5 More”链接似乎不可点击（？）谢谢David:-）要确认，我的代码将是

$（'#table1'）。查找（'tr:gt（+（numShown-1）+'）。隐藏（）.end（）。在（'View More'）之后$（“#表2”）.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）.after（'View More'）？
$('#table1')...
$('#table2')...

<script type="text/javascript">
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
$(document).ready(function(){
    $('table').each(function(){
        var table=$(this);
        var numRows = table.find('tr').length; // Total # rows
        // Hide rows and add clickable div
        table
        .find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<div class="more">Show <span>' + numMore + '</span> More</div>');

        table.next('.more').click(function(){
            var more=$(this);
            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.find('span').html(numRows - numShown);
            table.find('tr:lt('+numShown+')').show();
        })

    });
})
</script>

var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Show <span>' + numMore + '</span> More</div>');

    $('.more').click(function() {
        var numRows = $(this).prev().find('tr').length; // Total # rows
        shown = $(this).prev().find('tr:visible').length + numMore;
        // no more show more if done
        if (shown >= numRows) $(this).remove();
        // change rows remaining if less than increment
        if (numRows - shown < numMore) $(this).find('span').html(numRows - shown);
        $(this).prev().find('tr:lt(' + shown + ')').show();
    });
})​;