JavaScriptでtableの作成・td値の取得・行追加・クリック行取得

記事内にPRが含まれる場合があります

2022年6月11日2024年9月22日

URLをコピーしました！

JavaScriptで何もないところにtableを動的に作成する

createElement(tagName)とすることでtagNameで指定されたHTML要素を作成することができる。

tableを作成したい場合はcreateElement(“table”)とやればよい。

HTMLのtableを構成するのは、table、thead（なくてもよい）、tbody（なくてもよい）、tr、th、tdの要素があるのでこれらも作成します。

以下は1行3列の表を作成しているコードです。

var mybody = document.getElementsByTagName("body")[0];
var mytable = document.createElement("table");
var mytbody = document.createElement("tbody");
var mytr = document.createElement("tr");
var myth = document.createElement("th");
var mytd1 = document.createElement("td");
var mytd2 = document.createElement("td");

myth.textContent ="みだし";
mytd1.textContent = "あいうえお";
mytd2.textContent = "かきくけこ";

mytr.appendChild(myth);
mytr.appendChild(mytd1);
mytr.appendChild(mytd2);
mytbody.appendChild(mytr);
mytable.appendChild(mytbody);
mybody.appendChild(mytable);

1番上の行でやっているのはこのページのbody全体の0番目の要素つまりbodyタグを取得しています。
それ以後でcreateElementをやってtableに必要な部品を作成。

myth、mytd1、mytd2のtextContentに文字列を入れてあげてます。textContentプロパティはNodePrototypeからの継承で使えるプロパティです。

重要なのはその後のappendChildが6行続いてる部分です。

mytrに、myth、mytd1、mytd2をappendChildメソッドで追加
↓
mytbodyにmytrを追加
↓
mytableにmytbodyを追加
↓
mybodyにmytableを追加

とこの順番が大事。

要素をトップダウンで作成し、子要素を親要素へとボトムアップで追加していく。

まずHTML的に書くとどうなるかをイメージして、それをJavaScriptに落とし込んでいくようなスキルが必要。絵で描いてもいい。

CodePen

See the Pen
Untitled by pghappy (@pghappy)
on CodePen.

JavaScriptでtableと中の要素tdを取得する

HTML側の本文に

<table id="tbl"></table>

などと作っておいて、JavaScript側に

var mytable = document.getElementById("tbl");

とやればテーブルの要素を取得できる。

テーブルの中の「行」「列」「セル」にアクセスするには？
例えば以下のような表があったとして。

JavaScriptは以下のようにする。

var mytable = document.getElementById("tbl"); //html側のtableについてるidで要素を取得

for (var i=0; i < mytable.rows.length; i++) {
  for (var j=0; j < mytable.rows[i].cells.length; j++) {
    console.log(  "(" + i + "," + j + ") : " + mytable.rows[i].cells[j].innerHTML  );
  }
}

mytable.rowsで、すべての行（tr）要素を配列で取得。
mytable.rows.lengthで、行の数を取得。最初のforループで行の数だけ繰り返す。
mytable.rows[i].cellsでセル(thとtd)要素をまとめて配列で取得。
2番目のループではmyable.rows[i]に入ってるセルの数だけ繰り返す。

コンソールに値を表示しています。

CodePen↓

See the Pen
table-get-data by pghappy (@pghappy)
on CodePen.

JavaScriptのtalbeに行を追加する

行(tr)を追加するにはtable要素のinsertRowメソッドを使う。

var mytable = document.getElementById("tbl");

var mytr = mytable.insertRow(1);

このように記述する。insertRow()メソッドには必ず引数を入れて挿入する行番号を明示すること。（引数が無い時の挙動はブラウザによって異なる場合があるため）

引数は0が0行目。1が1行目。-1が最後の行に追加となる。

行（tr）を追加したら、後はその中に入れるセル（thやtd）を指定していく。

やり方はいくつかある様子。

完成のイメージは下図のとおり。

1つ目のやり方。

//1つ目のやり方
var mytr = mytable.insertRow(1); //引数1 : 表の1行目に追加

//thセルの追加
var myth = document.createElement("th");
myth.innerHTML = "URL";
mytr.appendChild(myth);

//tdセルの追加
var mycell1 = mytr.insertCell(1);
var mycell2 = mytr.insertCell(2);

//textContentでもいいしinnnerHTMLでもいいし
mycell1.textContent = "techacademy.jp";
mycell2.innerHTML = "tech-camp.in";

・thを追加するにはdocument.createElemnetを使うやり方しかなかった。innnerHTMLで文字列URLを指定してmytrにappendChildでthを追加。

・次にtdセルを2つ追加する。これはmytrのinsertCellメソッドで実現できる。引数には列番号を入力。

・セルの中身の文字列はtextContentやinnerHTMLで指定できる。innerHTMLを使えばHTMLで記述できる。

2つ目のやり方。

//2つ目のやり方
var mytr2 = mytable.insertRow(-1); //引数-1 : 表の一番最後に1行追加

var myth2 = document.createElement("th");
var myth2Txt = document.createTextNode("評価");
myth2.appendChild(myth2Txt);
mytr2.appendChild(myth2);

mycell3 = mytr2.insertCell(1);
mycell3Txt = document.createTextNode("●●●●");
mycell3.appendChild(mycell3Txt);

mycell4 = mytr2.insertCell(2);
mycell4Txt = document.createTextNode("★★★★");
mycell4.appendChild(mycell4Txt);

今回は表の最後の行に1行追加してみた。

thは先ほどと同様にdocument.createElement(“th”)で生成する。
次にdocument.createTextNode(“評価”)で、テキストノードを生成しこのmyth2Txtを親要素のthにappendChildして、さらにthは親要素のmytr2にappendChildする。

セルの生成は先ほどと同様にinsertCell()メソッドで行う。
中の文字列はcreateTextNodeで生成して親要素にappendChidするやり方となっている。

全体的なコードは以下のとおり。

See the Pen
table-insert-tr by pghappy (@pghappy)
on CodePen.

JavaScriptのtableのクリックしたセルと行を取得する

多分方法はいくつかある。

HTML側に作ったtableのセルにidとonclick属性を先に指定しておいて、javascriptでクリック時のイベントを取る方法があるけど、今回実現するのはその方法ではなくて。

以下ではJavaScript内でイベントを設定する方法を備忘録しておく。

例によって例のごとくHTML側は次のtableを用意した。

<body>
  <table id="tbl">
      <tr>
        <th>比較</th><th>テックアカデミー</th><th>テックキャンプ</th>
      </tr>
      <tr>
        <th>学習方式</th><td>オンライン</td><td>教室</td>
      </tr>
      <tr>
        <th>言語</th><td>いろいろ</td><td>Ruby on Rails</td>
      </tr>
      <tr>
        <th>料金</th><td>20万円</td><td>10万円</td>
      </tr>
    </tbody>
  </table>
<p id="result"></p>
</body>

これに対して、JavaScriptは以下のようにした。

var mytable = document.getElementById("tbl");

for (var i=0; i < mytable.rows.length; i++) {
  for (var j=0; j < mytable.rows[i].cells.length; j++) {
    mytable.rows[i].cells[j].id = i + "-" + j;
    mytable.rows[i].cells[j].onclick = clicked;
  }
}

function clicked(e) {
  var txt = document.getElementById("result");
  txt.textContent = e.target.id + "がクリックされました。値は：" + e.target.innerHTML;
}

1行目でidにtblを指定したtable要素を取得してmytableで使えるようにしている。

2重のforループでまわして1セルずつにidとonclickプロパティを指定した。onclickプロパティには関数clickedを実行するようにしている。

clicked(e)関数ではイベントが発生した際に、e.target.idでどこのセルがクリックされたかを表示しつつ、セルの文字を表示するようにした。

CodePenは以下のようになった。

See the Pen
table-get-click-tr by pghappy (@pghappy)
on CodePen.