web-dev-qa-db-fra.com

Comment parcourir les lignes et les cellules d'un tableau en JavaScript?

Si j'ai un tableau HTML ... dis

<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 pourrais-je parcourir toutes les lignes de la table (en supposant que le nombre de lignes puisse changer chaque fois que je vérifie) et récupérer les valeurs de chaque cellule de chaque ligne à partir de JavaScript?

javascript
166
GregH

Si vous voulez parcourir chaque ligne (<tr>), connaître/identifier la ligne (<tr>), et parcourir 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 simplement parcourir les cellules (<td>), en ignorant la ligne 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
}
263
John Hartsock

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

$('#mytab1 tr').each(function(){
    $(this).find('td').each(function(){
        //do your stuff, you can use $(this) to get current cell
    })
})
59
dzida
var table=document.getElementById("mytab1");
var r=0;
while(row=table.rows[r++])
{
  var c=0;
  while(cell=row.cells[c++])
  {
    cell.innerHTML='[Row='+r+',Col='+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, iterator de la boucle r et c augmente et une nouvelle ligne/cellule de la collection est affectée aux variables ligne/cellule. Lorsqu'il n'y a plus de lignes/cellules dans la collection, false est affecté à ligne/cellule et l'itération à travers la boucle while (exits).

10
sbrbot

Essayer

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>
5
Kamil Kiełczewski

Cette solution a parfaitement fonctionné pour moi

var table = document.getElementById("myTable").rows;
var y;
for(i = 0; i < # of rows; i++)
{    for(j = 0; j < # of columns; j++)
     {
         y = table[i].cells;
         //do something with cells in a row
         y[j].innerHTML = "";
     }
}
1
Karim O.

Si vous en voulez un avec un style fonctionnel, comme ceci:

    const table = document.getElementById("mytab1");
    const cells = table.rows.toArray()
                  .flatMap(row => row.cells.toArray())
                  .map(cell => cell.innerHTML); //["col1 Val1", "col2 Val2", "col1 Val3", "col2 Val4"]

Vous pouvez modifier l’objet prototype de HTMLCollection (permettant d’utiliser une méthode ressemblant aux méthodes d’extension en C #) et d’y incorporer une fonction qui convertit la collection en tableau, permettant d’utiliser des fonctions supérieures avec le style ci-dessus (type de style linq dans C #):

    Object.defineProperty(HTMLCollection.prototype, "toArray", {
        value: function toArray() {
            return Array.prototype.slice.call(this, 0);
        },
        writable: true,
        configurable: true
    });
0
l30_4l3X

Vous pouvez utiliser .querySelectorAll() pour sélectionner tous les éléments td, puis les parcourir avec .forEach(). Leurs valeurs peuvent être récupérées avec .innerHTML:

_const cells = document.querySelectorAll('td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})_
_<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>_

Si vous souhaitez sélectionner uniquement les colonnes d'une ligne spécifique, vous pouvez utiliser la pseudo-classe :nth-child() pour sélectionner une spécifique tr, éventuellement en association avec le combinateur enfant (_>_) (qui peut être utile si vous avez une table dans une table):

_const cells = document.querySelectorAll('tr:nth-child(2) > td');
cells.forEach(function(cell) {
  console.log(cell.innerHTML);
})_
_<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>_
0
Obsidian Age

Meilleure solution: utilisez la Array.from() native de Javascript et convertissez l'objet HTMLCollection en un tableau, après quoi vous pourrez 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 référencer 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 avec les variables globales i, j, row et col, et par conséquent fournit un code propre et modulaire qui n'aura aucun effet secondaire (ou n'émettra pas d'avertissements pour les peluches/compilateurs) ... sans autres bibliothèques (par exemple, jquery).

Si vous avez besoin que cela fonctionne dans une ancienne version de Javascript (antérieure à ES2015), Array.from peut être rempli.

0
mwag