JavaScriptでtableの値を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtableの値を取得する方法について現役エンジニアが解説しています。tableの値を取得するには、まずは要素を取得します。rowsやcellsというプロパティに行の情報やセルの値が入っています。また、直接td要素を取得して値を取得する方法もあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでtableの値を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

table要素を取得する方法

他のHTML要素と同じように取得することができます。例えば、idを設定している場合は、下記のようにgetElementByIdメソッドで取得します。

document.getElementById(【IDの名前】);

 

tableの行数、列数を取得する方法

取得したテーブル要素であるHTMLTableElementには、行の情報を持つrowsというプロパティがあります。このrowsプロパティの数(length)が行の数になります。

HTMLTableElement.rows.length

同じように行の要素であるHTMLTableRowElementには、セルの情報を持つcellsというプロパティがあります。このcellsプロパティの数(length)が列の数になります。

HTMLTableRowElement.cells.length

 

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

tableの値を取得する方法

テーブルの値はそれぞれのcell(枠)の中に入っています。つまりcellの中の値を取得することでテーブルの値を取得することができます。

HTMLTableCellElement.innerHTML

 

実際に書いてみよう

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

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

下記のようなテーブルができました。

HTMLのテーブル要素の値をJavaScriptで取得するためのサンプルテーブル。

このテーブルの値をJavaScriptで取得してみます。

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

for (let row of table.rows) {
    for(let cell of row.cells){
       console.log(cell.innerText);
    }
}

 

解説

document.getElementById(‘targetTable’)にて、HTMLのテーブルを取得しています。取得したテーブルを行のループでセルを取り出し、セルのループで値を取り出すという流れです。取り出した値はコンソールに出力しています。

table.rowsで全ての行を取得、row.cellsで行の中の全てのセルを取得です。テーブルの値を取得するパターンをもう一つ紹介します。

先程はHTMLのテーブル構造に合わせてループしました。特定の行やセルに処理をおこなう場合は、ループさせることになりますが今回のようにただ全ての値を取得する場合は、セル(tdタグ)の値を全て取れば良いので下記のように簡略化することもできます。

let table = document.getElementById('targetTable');
let cells = table.querySelectorAll('td');
cells.forEach( (cell) =>  console.log(cell.innerHTML));

 

筆者プロフィール

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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