Как перебрать строки и ячейки таблицы в JavaScript?

192

Если у меня есть таблица 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?

GregH
источник

Ответы:

304

Если вы хотите пройти через каждую строку ( <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
}
Джон Хартсок
источник
3
ex2, table.cells не совместим с браузером
EricG
8
@WilliamRemacle Я отправил этот ответ почти 4 года назад .. IE 9 даже не был идеей в то время!
Джон Хартсок
@JohnHartsock Я знаю, но я использовал ваше решение и понял, что оно не работает в IE. Это просто комментарий, чтобы предупредить остальных ... Я все равно проголосовал за твой ответ ;-)
Уильям Ремакл
function itTable () {document.writeln ("itTable"); var table = document.getElementById ("mytab"); for (var i = 0, row; row = table.rows [i]; i ++) {document.writeln (i); for (var j = 0, col; col = row.cells [j]; j ++) {document.writeln (j); }} document.writeln ("end-itTable"); } Почему этот код не позволил бы мне перебрать таблицу, аналогичную приведенной выше.
Даг Хауф
Для тех (кому нужен Google), нуждающихся в простом и небольшом шимме table.cells(для исправления некоторого старого / IE-ориентированного кода), смотрите мой ответ на вопрос : Браузер Firefox не распознает table.cells?
GitaarLAB