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

これにより、リンクがクリックされた同じテーブルの最初の 5 つの非表示行が下にスライドします。

$('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 に答える