jquery - 点击表格显示更多

Question

我的 JQuery 遇到了一个棘手的问题，我需要一些帮助，我正在尝试在表行上创建一个显示更多内容，但我想最初显示前 10 个，然后一次加载 10 个，但在一次是 1 和 1 的时刻:

<script type="text/javascript">
var curr = 0;
var rowN = $('.table tr').length;

$('.table tr').eq(curr).siblings().hide(); // hide all but current one

$('a.load_more').on('click',function(e){
    e.preventDefault(); // prevent default anchor behavior    
    $('.table tr').eq(++curr).show();
});

</script>

我尝试更改当前行，但它只是从某个行号开始，而不是第 1 行，因此我希望它显示前十个，然后单击加载下一个十个，依此类推...

Answer 1

避免使用全局变量的更好解决方案是在显示的行上放置一个类。然后，您可以使用该类查找最后一个可见元素的索引并显示下一组元素。试试这个:

$('table tr:first').addClass('active');

$('a.load_more').on('click', function(e) {
  e.preventDefault();  
  var $rows = $('table tr');
  var lastActiveIndex = $rows.filter('.active:last').index();
  $rows.filter(':lt(' + (lastActiveIndex + 3) + ')').addClass('active');
  
  // hide the button when all elements visible
  $(this).toggle($rows.filter(':hidden').length !== 0);
});

table tr { display: none; }
table tr.active { display: table-row; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
</table>

<a href="#" class="load_more">Load more</a>

在上面的示例中，每次点击会显示另外 2 行，但这可以根据需要轻松修改。