javascript - 使用完全相同的显示/隐藏 jQuery，但有两个表，而不是一个

Question

我找到了this在线，它的工作原理完全符合我的要求。

但是，我想使用2 个表格单独的内容，而不仅仅是一个。

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

这是如何实现的？

这是供引用的 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>

非常感谢您的指点。

Answer 1

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

工作示例: http://jsfiddle.net/cTuQ4/