JavaScriptでtableに行追加する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtableに行追加する方法について現役エンジニアが解説しています。tableはHTMLの要素で表を表します。table要素には後からJavaScriptで行を追加することも出来て、insertRowメソッドやinsertCellメソッドを使います。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでtableに行追加する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでtableに行追加する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

insertRowメソッドとは

HTMLのテーブルに行を追加するメソッドです。下記のようにJavaScriptで取得したテーブルに.insertRow()とすることで、1行追加されます。HTMLのソースでは空のtrタグが追加されています。

HTMLTableElement.insertRow();

また、引数に数字を渡した場合は、指定した行に追加することができます。0を指定するとテーブルの1行目に追加、1を指定すると2行目に追加という具合です。

そして追加した行のtrエレメントを戻り値で返してくれるので、追加したtrに処理を加える場合は戻り値を保持しておいてください。

insertCellメソッドとは

HTMLのテーブルの行にセルを追加するメソッドです。使い方は先ほど紹介したinsertRowとほぼ同じです。

HTMLTableRowElement.insertRow();

違いは、insertRowではHTMLTableElement(テーブル)に対してメソッドを呼び出しましたがinserCellでは、HTMLTableRowElement(行)に対していメソッドを呼び出していることです。

行の追加と同じように引数に数字を渡すことで、指定した列に追加することができます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

tableに行追加する方法(サンプルコード)

まずは、HTMLで名前を年齢を格納したテーブルを用意します。
JavaScriptからのアクセス用にテーブルタグにtargetTableというidを設定しています。

<table border="1" id="targetTable">
  <thead>
    <tr>
      <td>名前</td>
      <td>年齢</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>鈴木</td>
      <td>12</td>
    </tr>
  <tbody>
</table>

JavaScriptでHTMLのテーブルに行を追加する前の状態。

このテーブルに、山田、18というデータを1行追加するJavaScriptです。

let table = document.getElementById('targetTable');
let newRow = table.insertRow();

let newCell = newRow.insertCell();
let newText = document.createTextNode('山田');
newCell.appendChild(newText);

newCell = newRow.insertCell();
newText = document.createTextNode(18);
newCell.appendChild(newText);

 

解説

document.getElementById(‘targetTable’)にて、HTMLで用意したテーブルを取得しています。

let newRow = table.insertRow()にて、取得したテーブルにinsertRowメソッドで1行追加しています。追加した行をnewRowという変数に格納することで、この後にセルを追加する行を指定する手間が省けます。

後はこの追加した行に対して、insertCellメソッドでセルを作成しcreateTextNodeメソッドでセルの中の文字を作成し作成した文字をセルに追加という流れを繰り返して行の追加が完了です。

HTMLのテーブルにJavaScriptで行を追加するサンプルプログラムの実行結果

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。