JavaScript でテーブル行を非表示にする

クリック後に選択したテーブル行を非表示にしたり再表示したりするには、行に共通のクラスを付け、jQueryでそのクラスを選択します。1つのコントロールで表示状態を切り替える場合は toggle() を使い、非表示と表示に別々のコントロールを使う場合は hide() と show() を使います。以下の例では、jQueryを一度読み込む必要があります。ブラウザーのJavaScriptでもDOMとCSSを通じて表示状態を変更できます。jQueryは要素の選択や更新に便利なメソッドを提供します。

jQuery の toggle() で JavaScript のテーブル行を非表示にする

詳細行のグループごとにカテゴリ用クラスを付け、対応するコントロールの data-prod-cat 属性に同じカテゴリを指定します。これにより、各コントロールが対応する行だけを操作できます。行は style="display:none" で最初は非表示にしてあり、jQueryの表示メソッドで再表示できます。この設定と、行を非表示のままにする別のCSSルールを併用しないでください。クリックハンドラーは、リンクをクリックしても # に移動しないよう既定の動作を防ぎます。

例のように、$ を使うコードより前にjQueryのスクリプトを読み込みます。readyコールバックは文書のマークアップが利用可能になってからハンドラーを登録しますが、jQueryの読み込みがない場合や失敗した場合には対処できません。カテゴリを増やす場合は、クラス名とデータ値を一貫させてください。値が 3 なら .cat3 が選択され、関係のないクラスの行は対象になりません。コントロールにボタンを使う場合は、周囲のフォームを送信しないよう type="button" を指定します。

次の例を実行します。

const rows = [
  { category: 1, visible: false },
  { category: 1, visible: false },
  { category: 2, visible: false }
];

function toggleCategory(category) {
  for (const row of rows) {
    if (row.category === category) row.visible = !row.visible;
  }
}

toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));

shown, shown, hidden

この短いJavaScriptの例は、カテゴリを照合する仕組みを示しています。ブラウザーでは、jQueryを使って同じ考え方をテーブル行に適用します。

<table>
  <tbody>
    <tr>
      <th scope="row">Oranges</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
    </tr>
    <tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
    <tr>
      <th scope="row">Apples</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
    </tr>
    <tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".toggler").on("click", function (event) {
    event.preventDefault();
    const category = $(this).attr("data-prod-cat");
    $(".cat" + category).toggle();
  });
});
</script>

セレクターはクリックしたリンクのカテゴリから作られるため、英語表記の「Toggle oranges」をクリックすると、.cat1 の行だけが対象になります。もう一度クリックすると、その行は非表示になります。詳細行にはカテゴリ値と完全に一致するクラスが必要です。クラスが異なる行はセレクターで見つかりません。コントロールがページ内の移動に使われない場合は、リンクの代わりに <button type="button"> を使えます。その場合、preventDefault() は不要です。行は最初 display:none なので、最初のクリックで表示され、次のクリックで非表示になります。最初から表示するには、その初期スタイルを削除します。そうすると最初のクリックで非表示になります。

変更できない例に表示されるラベルはすべて英語のままです。1つ目の例では、カテゴリ行を切り替えるコントロールが「Toggle oranges」と「Toggle apples」、商品名が「Apples」と表示されます。2つ目の例のコントロールは「Hide rows」と「Show rows」と表示されます。

jQuery の show() と hide() で JavaScript のテーブル行を非表示にする

クリックごとに状態を切り替えるのではなく、操作を明示したい場合はコントロールを分けます。両方のコントロールが対象にする行に同じクラスを付け、最初は display:none にしておくと、最初の表示操作で行を再表示できます。行を最初から表示する場合はそのスタイルを省き、非表示コントロールで最初の状態変更を行います。複数のグループがあるテーブルでは、.detail-row の代わりにカテゴリごとのクラスを対象にできます。

<table>
  <tbody>
    <tr><th scope="row">Oranges</th><td>100</td></tr>
    <tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
    <tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
  </tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#hide-rows").on("click", function () {
    $(".detail-row").hide();
  });
  $("#show-rows").on("click", function () {
    $(".detail-row").show();
  });
});
</script>

hide() は選択した行の表示を none にします。show() はテーブル行が通常のテーブルレイアウトに参加できる適切な表示状態に戻します。行を表示する方法として、一般に display: block を設定しないでください。通常のテーブル行のレイアウトが保たれなくなります。行は最初は非表示なので、表示コントロールをクリックすると再表示され、繰り返しクリックしても問題ありません。非表示コントロールは行を明示的に隠します。一方、toggle() はクリックのたびに現在の状態を反転するため、1つのコントロールで切り替える場合に便利です。非表示にしたグループをいつでも再表示できるようにするなど、利用者に明示的な操作を提供したい場合は、show() と hide() の個別コントロールを使います。