javascriptでtableタグの中のコントロールにアクセスする
javascriptでtableタグの中のコントロールにアクセスする方法を紹介します。
例えばRepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById("コントロールID")のようにIDでコントロールを取得することができません。
以下のようなhtmlがあったときに、テーブルのコントロールから子の要素をたどっていく方法があります。
<table id="tbl">
<thead>
<tr>
<th>コード</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="1" id="???"></td>
<td><input type="text" value="社員A" id="???"></td>
</tr>
<tr>
<td><input type="text" value="2" id="???"></td>
<td><input type="text" value="社員B" id="???"></td>
</tr>
</tbody>
</table>var tbl = getElementById("tbl"); //テーブルのコントロールを取得
for(var i = 0; i < tbl.children[1].children.length; i++){
//tbl.children[0]はthead tbl.children[1]はtbody
var row = tbl.children[1].children[i]; //i番目のtrを取得
console.log(row.cells[0].getElementsByTagName("input")[0].value); //各行のコードのコントロールの値を出力
console.log(row.cells[1].getElementsByTagName("input")[0].value); //各行の名称のコントロールの値を出力
}tableのchildrenはthead,tbodyになります。
htmlでthead,tbodyを省略した場合でもchildrenは必要です。（ブラウザによって解釈が異なるかもしれません）
<table id="tbl">
<tr>
<th>コード</th>
<th>名称</th>
</tr>
<tr>
<td><input type="text" value="1" id="???"></td>
<td><input type="text" value="社員A" id="???"></td>
</tr>
<tr>
<td><input type="text" value="2" id="???"></td>
<td><input type="text" value="社員B" id="???"></td>
</tr>
</table>var tbl = getElementById("tbl"); //テーブルのコントロールを取得
for(var i = 1; i < tbl.children[0].children.length; i++){ //i=0はヘッダ
var row = tbl.children[0].children[i]; //tbl.children[0]がthead,tbodyの部分です
console.log(row.cells[0].getElementsByTagName("input")[0].value); //各行のコードのコントロールの値を出力
console.log(row.cells[1].getElementsByTagName("input")[0].value); //各行の名称のコントロールの値を出力
}