ワンランク上のWebデザインへ！HTMLテーブルの列を駆使するテクニック

2024-04-03

jQueryを使ってHTMLテーブルの列を表示/非表示する

準備

以下のものが必要です。

HTMLファイル
jQueryライブラリ

HTML

まず、HTMLファイルにテーブルを用意します。

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

jQuery

次に、jQueryを使って列を表示/非表示するコードを記述します。

$(function() {
  // 列のインデックスを指定して非表示にする
  $("th:nth-child(2)").hide();

  // ボタンをクリックして列を表示/非表示する
  $("#show-column").click(function() {
    $("th:nth-child(2)").show();
  });

  $("#hide-column").click(function() {
    $("th:nth-child(2)").hide();
  });
});

上記のコードでは、以下の処理を行っています。

$("th:nth-child(2)") で2番目の列を選択
.hide() で列を非表示にする
$("#show-column").click() で「表示」ボタンをクリックした時に

デモ

上記コードを全て記述したファイルをブラウザで開くと、テーブルが表示されます。「非表示」ボタンをクリックすると2番目の列が非表示になり、「表示」ボタンをクリックすると再び表示されます。

このチュートリアルでは、jQueryを使ってHTMLテーブルの列を動的に表示/非表示する方法を紹介しました。この方法は、テーブルのカラムを動的に切り替えたい場合に役立ちます。

列のインデックスは :nth-child() で指定できます。
列を非表示にする代わりに、width: 0; を使って幅を0にすることもできます。
より複雑な処理を行う場合は、条件分岐やループなどを利用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLテーブルの列を表示/非表示する</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>性別</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>山田太郎</td>
        <td>30</td>
        <td>男性</td>
      </tr>
      <tr>
        <td>佐藤花子</td>
        <td>25</td>
        <td>女性</td>
      </tr>
    </tbody>
  </table>
  <button id="show-column">列を表示</button>
  <button id="hide-column">列を非表示</button>
  <script>
  $(function() {
    // 列のインデックスを指定して非表示にする
    $("th:nth-child(2)").hide();

    // ボタンをクリックして列を表示/非表示する
    $("#show-column").click(function() {
      $("th:nth-child(2)").show();
    });

    $("#hide-column").click(function() {
      $("th:nth-child(2)").hide();
    });
  });
  </script>
</body>
</html>

実行方法

上記コードをHTMLファイルとして保存します。
ブラウザでファイルを開きます。
「非表示」ボタンをクリックすると2番目の列が非表示になります。

改良

このコードは基本的な例です。以下の点などを改良することで、より使いやすくすることができます。

列のインデックスをハードコードせずに、列名で指定できるようにする。
複数の列を同時に表示/非表示できるようにする。
チェックボックスなどを利用して、列の表示/非表示を切り替えられるようにする。

このサンプルコードを参考に、さまざまな方法でHTMLテーブルの列を表示/非表示してみてください。

HTMLテーブルの列を表示/非表示する他の方法

CSSの display プロパティを使って、列を非表示にすることができます。

th:nth-child(2) {
  display: none;
}

このコードは、2番目の列を非表示にします。

JavaScript

const column = document.querySelector("th:nth-child(2)");

// 列を非表示にする
column.style.display = "none";

// 列を表示する
column.style.display = "";

DataTablesのようなライブラリを使うと、より簡単にテーブルを操作することができます。

$(document).ready(function() {
  $("#table").DataTable();

  // 列を非表示にする
  $("#table").DataTable().column(1).visible(false);

  // 列を表示する
  $("#table").DataTable().column(1).visible(true);
});