JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

はじめに

HTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。

サンプルテーブルの準備

まず、例として次のようなテーブルを用意します。

<table>
   <tr id='StudentDetails'>
      <th>StudentName</th>
      <th>StudentCountryName</th>
   </tr>
   <tr id='FirstRow'>
      <td>JohnDoe</td>
      <td>UK</td>
   </tr>
   <tr id='SecondRow'>
      <td>DavidMiller</td>
      <td>US</td>
   </tr>
</table>

このテーブルには3つの行があり、それぞれ「StudentDetails」「FirstRow」「SecondRow」というidが割り当てられています。これらのidを行の先頭に新しいセルとして挿入していくのが目標です。

実装のポイント

trタグからidを取得して新しいtdセルに表示するには、document.querySelectorAll('table tr')を使ってテーブル内のすべての行を取得します。取得した各行（NodeList）に対してforEach()でループ処理を行い、insertCell(0)メソッドで行の先頭位置に新しいセルを挿入します。最後に、textContentプロパティへtrObj.idを代入すれば、各idがセル内に表示されます。

コード例

以下が完全なサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   td,
   th,
   table {
      border: 1px solid black;
      margin-left: 10px;
      margin-top: 10px;
   }
</style>
<body>
   <table>
      <tr id='StudentDetails'>
         <th>StudentName</th>
         <th>StudentCountryName</th>
      </tr>
      <tr id='FirstRow'>
         <td>JohnDoe</td>
         <td>UK</td>
      </tr>
      <tr id='SecondRow'>
         <td>DavidMiller</td>
         <td>US</td>
      </tr>
   </table>
</body>
<script>
   document.querySelectorAll('table tr').forEach(trObj => {
      var tableValue = trObj.insertCell(0);
      tableValue.textContent = trObj.id;
   });
</script>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存してください。その後、VS Codeエディタで保存したファイルを右クリックし、「Open with Live Server」を選択するとブラウザ上で確認できます。

出力結果

このプログラムを実行すると、テーブルの各行の先頭にidを示す新しいセルが追加され、以下のように表示されます。

JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

ヘッダー行には「StudentDetails」、データ行にはそれぞれ「FirstRow」「SecondRow」が先頭列に表示され、idの取得と動的なセル追加が正しく機能していることが確認できます。

  1. ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

    document.querySelectorでユーザー入力を取得する JavaScriptでは、document.querySelector(#id名)を使用することで、ユーザーがボタンをクリックしたタイミングで入力フィールドの値を簡単に取得できます。IDセレクタで要素を指定する場合は、先頭に「#」を付けるのがポイントです。 以下は、ユーザーが入力した数値をボタンクリック時に取得し、コンソールに表示するJavaScriptコードのサンプルです。 コード例 <!DOCTYPE html> <html lang="en"> <head> &l

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal