1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptでテーブルの行とセルを反復処理するには?

2022-04-23 12:16:12

質問

HTMLのテーブルがあるとしたら...例えば

<div id="myTabDiv">
<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>
</div>

テーブルのすべての行を繰り返し、(チェックするたびに行の数が変わる可能性があると仮定して)各行の各セルから値を取得するには、JavaScript内でどのようにすればよいでしょうか。

どのように解決するのですか?

各行ごとに調べたい場合( <tr> ) を知っている/識別している場合、その行 ( <tr> )、各列を繰り返し処理し( <td> ) の各行 ( <tr> )であれば、この方法でよいでしょう。

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}

セルを通過させるだけなら( <td> ) を、どの行にいるかは無視して、この方法で実行します。

var table = document.getElementById("mytab1");
for (var i = 0, cell; cell = table.cells[i]; i++) {
     //iterate through cells
     //cells would be accessed using the "cell" variable assigned in the for loop
}