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 en voulez un avec un style fonctionnel, comme celui-ci :

    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 (ce qui permet de l'utiliser d'une manière qui ressemble aux méthodes d'extension en C#) et y intégrer une fonction qui convertit la collection en tableau, ce qui permet d'utiliser des fonctions d'ordre supérieur avec le style ci-dessus (un peu comme le style linq en C#) :

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

Answer 2

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 = "";
     }
}

Answer 3

Vous pouvez utiliser .querySelectorAll() pour sélectionner tout td puis boucle sur ceux-ci 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 un tr , éventuellement en liaison avec le combinateur enfant ( > ) (ce qui peut être utile si vous avez un tableau dans un tableau) :

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>

Answer 4

En utilisant une seule boucle for :

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}

Answer 5

Je laisse ceci juste pour une référence future pour grattage une colonne spécifique du tableau HTML et d'imprimer les résultats.

//select what table you want to scrape (is zero based)
//set 0 if there is only one
setTable=0;
//select what column you want to scrape (is zero based)
//in this case I would be scrapping column 2
setColumnToScrape=1;
var table = document.getElementsByTagName("tbody")[setTable];
for (var i = 0, row; row = table.rows[i]; i++) {
  col = row.cells[setColumnToScrape];
  document.write(col.innerHTML + "<br>");
}