jqueryテーブルの下位行を非表示にする方法

Web サイト開発では、テーブルはデータを表示する一般的な形式であることがよくあります。ただし、詳細なデータを表示するには、テーブルにサブ行を埋め込む必要がある場合があります。最初にこれらのサブ行をすべて展開したくない場合は、サブ行を非表示にし、必要に応じて表示するメソッドを実装する必要があります。

幸いなことに、jQuery はこの機能を実現するのに役立つ非常に便利なメソッドを提供します。次に、いくつかの簡単なコードを使用して、サブ行を非表示にしたりサブ行を表示したりできる jQuery テーブルを実装します。

HTML が必要です

この例では、単純なテーブルを使用してデータを表示します。テーブルは、ヘッダーと本文という 2 つの主要な部分で構成されます。このうち、テーブル本体部分にはサブ行を追加する必要があるデータが含まれており、詳細なデータを表示するためにいくつかの新しい行を追加します。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

サブ行を非表示

まず、テーブル本体に新しい行を追加する必要があります。これらの行はサブ行として機能し、ユーザーがメイン行をクリックするまで非表示になります。次の HTML コードを使用して、追加の詳細データを表示する新しい行を追加します。

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

ご覧のとおり、クラス名 expandable を使用して、この新しい行がスケーラブルであることを表します。サブ行の幅がメイン行と同じになるように、列数を 4 に設定します。

次に、これらの新しい行を非表示にして、ページの読み込み時にユーザーに表示されないようにします。これを実現するには、次の CSS コードを使用します。

tr.expandable {
  display: none;
}

Web ページの読み込み時にサブ行を非表示にすることができたので、メイン ページの読み込み時にサブ行を表示するコードを追加する必要があります。行をクリックします。

サブ行の表示

この例では、メイン行をクリックしてサブ行を展開します。このとき、jQueryを使用し、click()関数を使用してユーザーのクリックイベントを監視し、メイン行に対応するサブ行の展開と折りたたみの操作を実現します。 。

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

$(document).ready() を使用して、ページ内のすべての要素が完全に読み込まれていることを確認してから、テーブル オブジェクト全体を click()イベント監視。ユーザーがテーブルの行をクリックすると、次の行の内容、つまり事前に追加した展開可能なサブ行を取得し、jQuery の toggle() を通じてそれらを展開または折りたたむことができます。関数。

上記のコードにより、サブ行を展開する機能を実現できます。

概要

この記事では、jQuery を使用してテーブルにサブ行を実装し、展開および折りたたみ操作を行う方法を示します。動的な HTML と CSS コードを追加することで、サブ行を非表示にし、ユーザーがメイン行をクリックしたときにサブ行を表示できるようになりました。これらの簡単な手順は、あらゆる Web サイト フォームの開発に簡単に適用でき、Web サイトのユーザー エクスペリエンスを向上させます。

以上がjqueryテーブルの下位行を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。