JavaScriptでtableタグをスクレイピングして値を取り出す方法

テーブルレイアウトで作成されたWebページやtableタグで組まれた表の値をスクレイピングして取り出すときには、JavaScriptでtableの列や行を走査して、値を取得していく必要があります。

そこで、JavaScriptでtableタグの列や行を扱う方法をまとめてみました。

2011.02.01追記

コメント欄での指摘で気がつきましたが、行と列が逆でしたので修正しました。

table要素を取得する

ページ内のtable要素を取得するには、document.getElementsByTagName関数が利用できます。tableタグにIDがふられている場合には、document.getElementByIdも利用することができます。

// ページ中にある0番目のtableを取得する。
var tbl = document.getElementsByTagName("table").item(0);

tableの行数、列数を取得する。

tableの列数を取得するには、tebleオブジェクト.rows.lengthプロパティを参照します。

var tbl = document.getElementsByTagName("table").item(0);
var rows = tbl.rows.length; // 行数

tableの行数を取得する場合は、tebleオブジェクト.rows.cells.lengthプロパティを参照します。

var tbl = document.getElementsByTagName("table").item(0);
var cols = tbl.rows[0].cells.length; // 列数

tableのセルの値を取得する。

tableのセルの値を取得する場合には、tableオブジェクト.rows[n].cells[n].innerTextプロパティで取得することができます。

var tbl = document.getElementsByTagName("table").item(0);
var value = tbl.rows[0].cells[0].innerText;

tableのセルの中にさらに別のタグが記述されている場合には、firstChildプロパティで、セル内の要素のinnerTextプロパティを参照します。

var value = tbl.rows[0].cells[0].firstChild.innerText;

サンプル

tableタグ内の全セルに対して、値の書き換えと背景色を変更するということをJavaScriptで行うサンプル。
JavaScript側

window.onload = function() {
   var tbl = document.getElementsByTagName("table").item(0);
   // 行に対するループ
   var rows = tbl.rows;
   for (var i=0, len=rows.length; i<len; i++) {
     var cols = rows[i].cells.length;
     // 列に対するループ
     for (var j=0; j<cols; j++) {
       rows[i].cells[j].innerText = "ほげ";
       rows[i].cells[j].style.backgroundColor = "orange";
     }
   }  
}

HTML側

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tableタグのサンプル</title>
<style type="text/css">
table, th, td {
  border: 1px solid orange;
  border-spacing: 0;
}
</style>
<script language="JavaScript" src="table.js"></script>
</head>
<body>
<h1>tableタグのサンプル</h1>
<table>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
</tbody>
</table> 
</body>
</html>