¿Cómo puedo iterar a través de las filas y celdas de la tabla en JavaScript?

Question

Si tengo una tabla HTML ... decir

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

¿Cómo voy a recorrer todas las filas de la tabla (suponiendo que el número de filas podrían cambiar cada vez que puedo comprobar) y recuperar los valores de cada celda en cada fila de dentro de JavaScript?

Answer 1

Si quieres ir a través de cada fila (<tr>), sabiendo/identificación de la fila (<tr>) y repite el proceso cada columna (<td>) de cada fila (<tr>), entonces este es el camino a seguir.

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 lo que desea es ir a través de las células (<td>), haciendo caso omiso de la fila que está en, entonces este es el camino a seguir.

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

Puede considerar el uso de jQuery. Con jQuery que es súper fácil y podría tener este aspecto:

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

En cada paso a través mientras que los aumentos de bucle r/c iterador y nueva fila/célula de la colección se asigna a la fila/variables de celda Cuando no hay más filas/celdas en la colección, se asigna falso a la fila/celda y la iteración mientras el ciclo se detiene (sale).

Answer 4

Esta solución funcionó perfectamente para mí

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