JavaScript：tableの要素を順に取得する方法

tableでデータを一覧形式に表示後、サーバー送信時などでtableデータを全件取得したい場合の実装例をご紹介します。

サンプルテーブル

列A	列B	列C
A1	B1	C1
A2	B2	C2
A3	B3	C3

サンプルテーブルのHTML

<table id="javascript_sample_table_1" style="border-style: solid; width: 300px;" border="1" cellspacing="0" cellpadding="1" align="center">
<thead>
<tr style="border-style: solid;">
<th>列A</th>
<th>列B</th>
<th>列C</th>
</tr>
</thead>
<tbody id="javascript_sample_table_1_tbody">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>

<thead>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

サンプルテーブルの要素を順に取得するJavaScript

※イベントのハンドリングはjQueryで記載してます。

jQuery(function($) {
	jQuery("#btn_javascript_sample_table_1").click(function() {
		var tblTbody = document.getElementById('javascript_sample_table_1_tbody');
		document.getElementById("txtArea_javascript_sample_table_1").value = "";
		// td内のtrをループ。rowsコレクションで,行位置取得。
		for (var i=0, rowLen=tblTbody.rows.length; i<rowLen; i++) {
			// tr内のtdをループ。cellsコレクションで行内セル位置取得。
			for (var j=0, colLen=tblTbody.rows[i].cells.length ; j<colLen; j++) {
				//i行目のj列目のセルを取得
				var cells = tblTbody.rows[i].cells[j];
				//取得した値をテキストエリアへ表示
				document.getElementById("txtArea_javascript_sample_table_1").value += i + "行目" + j + "列目の値は「" + cells.innerHTML + "」です。\n";
			}
		}
	});
});

jQuery(function($) {

jQuery("#btn_javascript_sample_table_1").click(function() {

var tblTbody = document.getElementById('javascript_sample_table_1_tbody');

document.getElementById("txtArea_javascript_sample_table_1").value = "";

// td内のtrをループ。rowsコレクションで,行位置取得。

for (var i=0, rowLen=tblTbody.rows.length; i<rowLen; i++) {

// tr内のtdをループ。cellsコレクションで行内セル位置取得。

for (var j=0, colLen=tblTbody.rows[i].cells.length ; j<colLen; j++) {

//i行目のj列目のセルを取得

var cells = tblTbody.rows[i].cells[j];

//取得した値をテキストエリアへ表示

document.getElementById("txtArea_javascript_sample_table_1").value += i + "行目" + j + "列目の値は「" + cells.innerHTML + "」です。\n";

}

});

IE11ではrowsプロパティの値が必ず0になってしまうようなので、6,8,10行目を以下の様に変更します。

for (var i=0, rowLen=tblTbody.children.length; i<rowLen; i++) {

1	for (var i=0, rowLen=tblTbody.children.length; i<rowLen; i++) {

for (var j=0, colLen=tblTbody.children[i].cells.length ; j<colLen; j++) {

1	for (var j=0, colLen=tblTbody.children[i].cells.length ; j<colLen; j++) {

var cells = tblTbody.children[i].cells[j];

1	var cells = tblTbody.children[i].cells[j];

実行サンプル

補足：応用例と注意点

ヘッダー行や空行をスキップする処理を入れる
　記事中の例では tbody.rows をそのままループしていますが、実際には以下のようなケースを考慮した方が扱いやすくなります。

<thead> を含むテーブルでは、ヘッダー行（<th>）を除外したい
空の行（すべてのセルが空文字列）や非表示の行を除外したい
colspan／rowspan を含む複雑なセル構成を扱いたい

　たとえば、以下のようなチェックを追加できます：

for (let i = 0; i < tblTbody.rows.length; i++) {
  let tr = tblTbody.rows[i];
  // 空行をスキップ
  if (Array.from(tr.cells).every(cell => cell.innerText.trim() === "")) {
    continue;
  }
  for (let j = 0; j < tr.cells.length; j++) {
    // 取得・処理
    ...
  }
}

for (let i = 0; i < tblTbody.rows.length; i++) {

let tr = tblTbody.rows[i];

// 空行をスキップ

if (Array.from(tr.cells).every(cell => cell.innerText.trim() === "")) {

continue;

}

for (let j = 0; j < tr.cells.length; j++) {

// 取得・処理

...

}

textContent／innerText vs innerHTML の使い分け
　セル内に HTML 要素（たとえば <span>, <a> など）が含まれている場合、

innerHTML を使うとその HTML 構造も含めた文字列が得られる
textContent／innerText を使うと「見た目上のテキスト部分のみ」が取得できる

　用途に応じて使い分けるとよいでしょう。

パフォーマンス改善のヒント
　大きなテーブルを扱うとき、以下のような工夫がパフォーマンス向上につながります。

ループの外で tblTbody.rows や tr.cells の長さ（length）を取得してキャッシュする
DOM 更新を控える（たとえば、逐次テキストエリアに追記するより、文字列をまとめてから最後に value = … で一括設定する）
DocumentFragment を活用して一時的に要素をまとめて操作する

ブラウザ対応・仕様差異への配慮
　記事中で触れられているように、IE11 など一部ブラウザでは rows や cells の挙動が期待通りでない場合があります。
　近年では IE の使用率が極めて低くなっているため、対象ユーザーのブラウザ環境に応じて対応可否を判断するとよいでしょう。
JSON 形式で出力したい場合
　取得したテーブルの内容を JSON に整形してサーバーへ送信したいケースもよくあります。その場合には、次のような構造がよく使われます：

const tableData = [];
for (let i = 0; i < tblTbody.rows.length; i++) {
  const tr = tblTbody.rows[i];
  const rowObj = {};
  for (let j = 0; j < tr.cells.length; j++) {
    const header = theadRow.cells[j].innerText.trim();  // ヘッダー文字列を鍵にする例
    rowObj[header] = tr.cells[j].innerText.trim();
  }
  tableData.push(rowObj);
}
// JSON に変換
const json = JSON.stringify(tableData);

const tableData = [];

for (let i = 0; i < tblTbody.rows.length; i++) {

const tr = tblTbody.rows[i];

const rowObj = {};

for (let j = 0; j < tr.cells.length; j++) {

const header = theadRow.cells[j].innerText.trim(); // ヘッダー文字列を鍵にする例

rowObj[header] = tr.cells[j].innerText.trim();

}

tableData.push(rowObj);

}

// JSON に変換

const json = JSON.stringify(tableData);

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

JavaScript：tableの要素を順に取得する方法

サンプルテーブル

サンプルテーブルのHTML

サンプルテーブルの要素を順に取得するJavaScript

実行サンプル

補足：応用例と注意点

Ads by Google