tableでデータを一覧形式に表示後、サーバー送信時などでtableデータを全件取得したい場合の実装例をご紹介します。
サンプルテーブル
| 列A | 列B | 列C |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | C2 |
| A3 | B3 | C3 |
サンプルテーブルのHTML
|
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 |
<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> |
サンプルテーブルの要素を順に取得するJavaScript
※イベントのハンドリングはjQueryで記載してます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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行目を以下の様に変更します。
|
1 |
for (var i=0, rowLen=tblTbody.children.length; i<rowLen; i++) { |
|
1 |
for (var j=0, colLen=tblTbody.children[i].cells.length ; j<colLen; j++) { |
|
1 |
var cells = tblTbody.children[i].cells[j]; |
実行サンプル