Comment itérer dans les lignes et les cellules d'un tableau en JavaScript ?

Question

Si j'ai un tableau HTML...disons

<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>

Comment puis-je itérer dans toutes les lignes du tableau (en supposant que le nombre de lignes puisse changer à chaque vérification) et récupérer les valeurs de chaque cellule de chaque ligne à partir de JavaScript ?

Answer 1

Si vous voulez passer par chaque ligne( <tr> ), connaître/identifier la ligne ( <tr> ), et itérer à travers chaque colonne ( <td> ) de chaque ligne ( <tr> ), alors c'est la voie à suivre.

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
   }  
}

Si vous voulez juste passer par les cellules( <td> ), sans tenir compte de la rangée sur laquelle vous vous trouvez, alors c'est la voie à suivre.

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
}

Answer 2

Vous pouvez envisager d'utiliser jQuery. Avec jQuery, c'est très facile et cela peut ressembler à ceci :

$('#mytab1 tr').each(function(){
    $(this).find('td').each(function(){
        //do your stuff, you can use $(this) to get current cell
    })
})

Answer 3

Essayez

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       console.log(cell.innerText)
    }
}

<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>

for ( let [i,row] of [...mytab1.rows].entries() ) 
{
    for( let [j,cell] of [...row.cells].entries() ) 
    {
       console.log(`[${i},${j}] = ${cell.innerText}`)
    }
}

<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>

Answer 4

var table=document.getElementById("mytab1");
var r=0; //start counting rows in table
while(row=table.rows[r++])
{
  var c=0; //start counting columns in row
  while(cell=row.cells[c++])
  {
    cell.innerHTML='[R'+r+'C'+c+']'; // do sth with cell
  }
}

<table id="mytab1">
  <tr>
    <td>A1</td><td>A2</td><td>A3</td>
  </tr>
  <tr>
    <td>B1</td><td>B2</td><td>B3</td>
  </tr>
  <tr>
    <td>C1</td><td>C2</td><td>C3</td>
  </tr>
</table>

À chaque passage de la boucle while, l'itérateur r/c augmente et un nouvel objet rangée/cellule de la collection est attribué aux variables rangée/cellule. Quand il n'y a plus de rangées/cellules dans la collection, false est assigné à la variable row/cell et l'itération dans la boucle while s'arrête (sortie).

Answer 5

Meilleure solution : utiliser la fonction native de Javascript Array.from() et pour convertir l'objet HTMLCollection en un tableau, après quoi vous pouvez utiliser les fonctions de tableau standard.

var t = document.getElementById('mytab1');
if(t) {
    Array.from(t.rows).forEach((tr, row_ind) => {
        Array.from(tr.cells).forEach((cell, col_ind) => {
            console.log('Value at row/col [' + row_ind + ',' + col_ind + '] = ' + cell.textContent);
        });
    });
}

Vous pouvez également faire référence à tr.rowIndex et cell.colIndex au lieu d'utiliser row_ind et col_ind .

Je préfère de loin cette approche aux deux réponses les plus votées car elle n'encombre pas votre code de variables globales. i , j , row et col Il fournit donc un code propre et modulaire qui n'aura pas d'effets secondaires (et ne déclenchera pas d'avertissements de la part du compilateur)... sans autres bibliothèques (par exemple, jquery).

Si vous avez besoin d'exécuter ce programme dans une ancienne version (antérieure à ES2015) de Javascript, Array.from peuvent être polychargés.