1

对于此 HTML 代码：

<table>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <!-- etc... -->
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <!-- etc... -->
    <tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

这是到目前为止我得到的 jQuery 代码：

//show 5 more table rows (that were previously hidden)
$('a.show-5-more').click(function() {
    alert('clicked!');
    return false;
});

我怎样才能做到这一点：

  • 选择第一个隐藏slideDown()的表格行，然后选择表格行
  • 选择下一个，向下滑动
  • 选择下一个，等等...
  • 我想对 5 个隐藏的表格行执行此操作
4

2 回答 2

2

这将在单击链接的同一个表中向下滑动前五个隐藏行：

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").slideDown();
  return false;
});

如果你想一个接一个地向下滑动它们，你有几个选择。可能最简单的方法是使用超时将它们有效地链接在一起：

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").stop().each(function(i, val) {
    slide_down(this, i, 600);
  });
  return false;
});

function slide_down(el, i, delay) {
  setTimeout(function() {
    $(el).slideDown(delay);
  }, i * delay);
}

或者，您可以尝试将回调链接slideDown()在一起。

但是，在这种情况下，我建议使用它<tbody>来简化实现：

<table>
<tbody>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

接着：

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tbody:hidden:first").slideDown("slow");
  return false;
});

对于这种事情，对行进行分组要简单得多。

于 2009-12-20T05:33:56.120 回答
0

要一次显示 5 个，您可以使用

$(function() {
  $('.show-5-more').click(function() {
    $(this).closest('table').data('row', 0);
    slideDownNext.call(this);
  });
});

function slideDownNext() {
  var $table = $(this).closest('table');
  if($table.data('row') < 5) {
    $table.data('row', $table.data('row') + 1);
    $table.find('tr:hidden:first').slideDown('', slideDownNext);
  }
}
于 2009-12-20T05:56:43.897 回答