【javascript】tableの行クリックで背景色を変更する方法

【javascript】tableの行クリックで背景色を変更する方法

実現したいこと

以下のようなHTMLのtableにて行をクリックされた場合に、その行の背景色を変更します。

以下は画像ですが、後述の動作確認で実際の動きを確認できますよ。

今回使用した環境

インターネット接続可能のオンラインの環境

64 ビット オペレーティング システム

Windows 10 22H2

Chrome 134.0.6998.118

ソースコード

以下、HTMLのtableとjavascriptです。tableのヘッダ (th) の背景色はクリックされても変わらないようにするため、33行目のif文で背景色の変更対象をtdだけとしています。

34行目の繰り返し処理でいったん行の背景色を全て白色に変更し、37行目でクリックされた行の背景色を変更しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>サイトタイトル</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <h1>tableの行をクリックして背景色を変更する</h1>
    <table class="list-basic" id="tbl01">
      <tbody>
        <tr>
          <th>名前</th>
          <th>年齢</th>
          <th>住所</th>
        </tr>
        <tr>
          <td>田中</td>
          <td>27</td>
          <td>東京都</td>
        </tr>
        <tr>
          <td>佐藤</td>
          <td>42</td>
          <td>埼玉県</td>
        </tr>
        </tbody>
    </table>
    <script type="text/javascript">
      var table = document.querySelector('#tbl01');
      var tr = table.querySelectorAll("tr");
      table.addEventListener("click", function(e) {
        if(e.target.tagName.toLowerCase() === "td") {
          tr.forEach(element => {
            element.className = "unselect-row";
          });
          e.target.parentNode.className = "select-row";
        }
      });
    </script>
</body>
</html>

以下、cssです。

.list-basic {
  border-collapse: collapse;
}

.list-basic th {
  padding: 10px;
  border: solid 1px #808080;
  background-color: #003366;
  color: #ffffff;
}

.list-basic td {
  padding: 10px;
  border: solid 1px #808080;
}

.select-row {
  background-color: #ffe4c4;
}

.unselect-row {
  background-color: #ffffff;
}

動作確認

動作確認です。こちらはクリックすることで実際の動きを試してみることができます。

サイトタイトル

tableの行をクリックして背景色を変更する

名前 年齢 住所
田中 27 東京都
佐藤 42 埼玉県

想定通りの動きが確認できました。

以上となります。

ここまでお読みいただきありがとうございました。

JavaScript

Posted by だゆう