web-dev-qa-db-ja.com

テーブル行を展開して閉じることはできますか？

テーブルの行を展開したり折りたたんだりすることは可能ですか？誰かがスクリプトや例を紹介してくれますか？可能であればjQueryを好みます。私が達成したい描画コンセプトがあります：

alt text

jquerytablelayout
27
Erik

次のようにできます：

[〜＃〜] 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のデモ を参照してください

お役に立てれば ！

8
Valentin Flachsel

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

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が残ります。コンテンツを再表示するために。行が完全に崩壊した場合、それを戻す簡単な明白な方法はありません。

JS Binでのデモ

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

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

JS Binでのデモ

3
David Thomas

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にいくつかの小さな変更を加えました。

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

これが誰かを助けることを願っています！

ピーター・アジタイの功績

2
Kyle Andersen

さて、テーブルの代わりにDIVを使用する方がはるかに簡単だと思います（ただし、テーブルの使用に問題はありません）。

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

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

0
netrox

あなたの質問に答えるために、いいえ。 divでも可能です。機能がテーブルではなくdivを使用して行われた場合、唯一の質問は混乱の原因となります。

0
Nigel