Wie iteriere ich in JavaScript durch Tabellenzeilen und -zellen?

Wenn ich eine HTML-Tabelle habe ... sagen Sie

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

Wie würde ich alle Tabellenzeilen durchlaufen (vorausgesetzt, die Anzahl der Zeilen könnte sich bei jeder Überprüfung ändern) und Werte aus jeder Zelle in jeder Zeile aus JavaScript abrufen?

Wenn Sie jede Zeile ( <tr>) durchgehen, die Zeile ( ) kennen / identifizieren <tr>und jede Spalte ( <td>) jeder Zeile ( <tr>) durchlaufen möchten , ist dies der richtige Weg.

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

Wenn Sie nur die Zellen ( <td>) durchgehen und ignorieren möchten, in welcher Zeile Sie sich befinden, ist dies der richtige Weg.

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
}

Sie können die Verwendung von jQuery in Betracht ziehen. Mit jQuery ist es super einfach und könnte so aussehen:

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

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>

Bei jedem Durchlauf während der Schleife nimmt der R / C-Iterator zu und ein neues Zeilen- / Zellenobjekt aus der Sammlung wird Zeilen- / Zellenvariablen zugewiesen. Wenn sich keine Zeilen / Zellen mehr in der Sammlung befinden, wird false der Zeilen- / Zellenvariablen zugewiesen und durchlaufen, während die Schleife stoppt (beendet wird).

Versuchen

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>

Diese Lösung hat bei mir perfekt funktioniert

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

Wenn Sie einen mit einem funktionalen Stil möchten, wie folgt:

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

Sie können das Prototypobjekt von HTMLCollection ändern (in ähnlicher Weise wie Erweiterungsmethoden in C # verwenden) und eine Funktion einbetten, die die Auflistung in ein Array konvertiert, sodass Funktionen höherer Ordnung mit dem oben genannten Stil (Art des Linq-Stils in) verwendet werden können C #):

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

Bessere Lösung: Verwenden Sie das native Javascript Array.from()und konvertieren Sie das HTMLCollection-Objekt in ein Array. Anschließend können Sie Standard-Array-Funktionen verwenden.

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

Sie können auch auf tr.rowIndexund cell.colIndexanstelle von row_indund verweisen col_ind.

Ich viel lieber diesen Ansatz über die Top-2 Antworten höchsten gestimmt , weil es nicht mit globalen Variablen Code nicht Unordnung i, j, rowund col, und deshalb liefert es sauber, modular Code, der keine Nebenwirkungen haben (oder Erhöhung Flusen / Compiler - Warnungen) ... ohne andere Bibliotheken (zB jquery).

Wenn Sie dies benötigen, um in einer alten Version (vor ES2015) von Javascript ausgeführt zu werden, Array.fromkann dies mehrfach ausgefüllt werden.

Sie können .querySelectorAll()alle tdElemente auswählen und diese dann mit durchlaufen .forEach(). Ihre Werte können abgerufen werden mit .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>

Wenn Sie nur Spalten aus einer bestimmten Zeile auswählen möchten, können Sie mithilfe der :nth-child()Pseudoklasse eine bestimmte auswählen tr, optional in Verbindung mit dem untergeordneten Kombinator ( >) (was nützlich sein kann, wenn Sie eine Tabelle in einer Tabelle haben):

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>

Verwenden einer einzelnen for-Schleife:

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