36

表の行を展開したり折りたたんだりすることはできますか? 誰かがスクリプトまたは例を参照できますか?

できればjQueryの方がいいです。達成したい描画コンセプトがあります。

代替テキスト

4

6 に答える 6

54

はい、テーブルの行は上下にスライドできますが、テーブルの形状が変化し、すべてがジャンプするため、見苦しくなります。代わりに、orなどtdのように意味のある要素を each に入れます。ph2

テーブルスライドトグルの実装に関しては...

テーブル全体にクリック ハンドラーを配置し、何がクリックされ.stopPropagation()たかを確認するのがおそらく最も簡単です。

colspan のある行の td がクリックされた場合は、その中の を閉じますp。colspan のある行の td でない場合は、閉じてから次の行の を切り替えますp。

またはまたは テーブルの形状を変更したくないためtd、すべての記述コンテンツをs内の要素でラップすることが不可欠です。slideUptdtr

何かのようなもの：

$(function() {
  
      // Initially hide toggleable content
    $("td[colspan=3]").find("p").hide();

      // Click handler on entire table
    $("table").click(function(event) {

          // No bubbling up
        event.stopPropagation();

        var $target = $(event.target);

          // Open and close the appropriate thing
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});​

この jsFiddle の例で試してみてください。

+...そして、トグルの実装を示すこのjsFiddleを試してください-。

HTML には、いくつかtdの の行とtd1 より大きい colspan の行を交互に配置する必要があります。明らかに、詳細を非常に簡単に調整できます。

HTML は次のようになります。

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>
    
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>​
于 2010-10-09T20:42:43.463 に答える
11

あなたはこのようにそれを行うことができます：

HTML

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td><a href="#" id="show_1">Show Extra</a></td>
    </tr>
    <tr>
        <td colspan="5">
            <div id="extra_1" style="display: none;">
                <br>hidden row
                <br>hidden row
                <br>hidden row
            </div>
        </td>
    </tr>
</table>

jQuery

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
});

JSFiddleのデモを見る

于 2010-10-09T19:15:32.903 に答える
3

それはあなたのマークアップに依存しますが、それは確かに機能させることができます、私は以下を使用しました：

jQuery

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).siblings('p').slideToggle();
      }
      );
  }
  );

html

  <table>
  <thead>
    <tr>
      <th>Actor</th>
      <th>Which Doctor</th>
      <th>Significant companion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><h2>William Hartnell</h2></td>
      <td><h2>First</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Susan Foreman</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Patrick Troughton</h2></td>
      <td><h2>Second</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jamie MacCrimmon</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Jon Pertwee</h2></td>
      <td><h2>Third</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jo Grant</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
  </tbody>
</table>

私がアプローチした方法は、行のセル内の特定の要素を折りたたむことです。これにより、私の場合、行はslideUp()段落が非表示になり、要素を残したまま、h2クリックしてコンテンツを再表示します。 。行が完全に崩壊した場合、それを元に戻す簡単な方法はありません。

JSBinでのデモ

@Peter Ajtaiが指摘したように、コメントでは、上記のアプローチは1つのセルのみに焦点を当てています（意図的にではありますが）。すべての子p要素を展開するには、これが機能します。

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).closest('tr').find('p').slideToggle();
      }
      );
  }
  );

JSBinでのデモ

于 2010-10-09T19:16:11.897 に答える
2

jQuery

$(function() {
    $("td[colspan=3]").find("div").hide();
    $("tr").click(function(event) {
        var $target = $(event.target);
        $target.closest("tr").next().find("div").slideToggle();                
    });
});

HTML

<table>
    <thead>
        <tr>
            <th>one</th><th>two</th><th>three</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td><p>data<p></td><td>data</td><td>data</td>
        </tr>
        <tr>
            <td colspan="3">
                <div>
                    <table>
                            <tr>
                                <td>data</td><td>data</td>
                            </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

これは、上記の前の例によく似ています。その例を実装しようとすると、展開されていないときに展開する表の行をクリックすると消えてしまい、展開できなくなることがわかりました

これを修正するために、スライドアップの展開可能な要素をクリックする機能を単純に削除し、上の表の行を使用してのみトグルできるようにしました。

また、HTML とそれに対応する jQuery にも若干の変更を加えました。

注：私はコメントをしたばかりですが、まだ許可されていないため、長い投稿です。消えるテーブル行に何が起こっているのかを理解するのに少し時間がかかったので、これを投稿したかっただけです.

Peter Ajtaiの功績

于 2015-11-20T14:32:38.400 に答える
0

あなたの質問に答えるには、いいえ。ただし、それは div で可能です。唯一の問題は、機能がテーブルではなく div で行われた場合、混乱を招くことです。

于 2010-10-09T18:49:44.913 に答える
0

テーブルの代わりに DIV を使用すると、はるかに簡単になると思います (ただし、テーブルを使用しても問題はありません)。

私のアプローチは、jQuery.ajax を使用してサーバーからより多くのデータを要求することです。そのようにして、選択された DIV (テーブルを使用する場合は TD) が要求されたコンテンツに基づいて自動的に拡張されます。

そうすれば、すべてのコンテンツを一度にロードしないため、帯域幅が節約され、高速になります。選択されている場合にのみロードされます。

于 2010-10-09T21:08:15.010 に答える