Come posso scorrere le righe e le celle della tabella in JavaScript?

Se ho una tabella HTML ... diciamo

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

Come posso scorrere tutte le righe della tabella (supponendo che il numero di righe possa cambiare ogni volta che controllo) e recuperare i valori da ogni cella in ogni riga all'interno di JavaScript?

Se vuoi passare attraverso ogni riga ( <tr>), conoscendo / identificando la riga ( <tr>), e scorrere attraverso ogni colonna ( <td>) di ogni riga ( <tr>), allora questa è la strada da percorrere.

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

Se vuoi solo passare attraverso le celle ( <td>), ignorando la riga in cui ti trovi, allora questa è la strada da percorrere.

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
}

Puoi prendere in considerazione l'utilizzo di jQuery. Con jQuery è semplicissimo e potrebbe apparire così:

$('#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>

Ad ogni passaggio, mentre l'iteratore r / c del ciclo aumenta e il nuovo oggetto riga / cella dalla raccolta viene assegnato alle variabili riga / cella. Quando non ci sono più righe / celle nella raccolta, false viene assegnato alla variabile riga / cella e viene ripetuto mentre il ciclo si arresta (esce).

Provare

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>

Questa soluzione ha funzionato perfettamente per me

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

Se vuoi uno con uno stile funzionale, in questo modo:

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

È possibile modificare l'oggetto prototipo di HTMLCollection (che consente di utilizzare in modo simile ai metodi di estensione in C #) e incorporare in esso una funzione che converte la raccolta in array, consentendo di utilizzare funzioni di ordine superiore con lo stile sopra (tipo di stile linq in C #):

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

Soluzione migliore: utilizzare il nativo di Javascript Array.from()e convertire l'oggetto HTMLCollection in un array, dopo di che è possibile utilizzare le funzioni di array 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);
        });
    });
}

Puoi anche fare riferimento tr.rowIndexe cell.colIndexinvece di usare row_inde col_ind.

Preferisco di gran lunga questo approccio sopra le righe 2 più alto votato risposte perché non ingombrare il codice con variabili globali i, j, rowe col, e, pertanto, fornisce codice pulito, modulare che non avrà alcun effetto collaterale (o rilancio lint / avvisi del compilatore) ... senza altre librerie (ad es. jquery).

Se è necessario eseguirlo in una versione precedente (pre-ES2015) di Javascript, è Array.frompossibile eseguire il polyfill.

È possibile utilizzare .querySelectorAll()per selezionare tutti gli tdelementi, quindi scorrere su di essi con .forEach(). I loro valori possono essere recuperati con .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>

Se desideri selezionare solo colonne da una riga specifica, puoi utilizzare la pseudo-classe :nth-child()per selezionare una specifica tr, facoltativamente in combinazione con il combinatore figlio ( >) (che può essere utile se hai una tabella all'interno di una tabella):

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>

Utilizzando un singolo per loop:

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