Come faccio a scorrere le righe e le celle della tabella in JavaScript?

Question

Se ho una tabella HTML ... dire

<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 faccio a scorrere tutte le righe della tabella (supponendo che il numero di righe potrebbero cambiare ogni volta che posso controllare) e recuperare i valori da ogni cella in ogni riga da all'interno di JavaScript?

Answer 1

Se si desidera passare attraverso ogni riga (<tr>), conoscendo/identificare la riga (<tr>), e scorrere ogni colonna (<td>) di ogni riga (<tr>), allora questo è 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 si desidera solo per passare attraverso le cellule (<td>), ignorando quale riga sei su, allora questo è 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 
} 

Answer 2

È possibile considerare l'utilizzo di jQuery. Con jQuery è super-facile e potrebbe essere simile a questo:

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

Answer 3

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>

In ogni passaggio attraverso mentre aumenta ciclo r/c iteratore e nuova riga/cella dalla raccolta viene assegnato a remare/variabili di cella. Quando non ci sono più righe/celle nella raccolta, false viene assegnata a riga/cella e iterazione mentre l'anello si ferma (esce).

Answer 4

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