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


192

Si tengo una tabla HTML ... digamos

<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 iteraría a través de todas las filas de la tabla (suponiendo que el número de filas podría cambiar cada vez que verifico) y recuperar valores de cada celda en cada fila desde JavaScript?

Respuestas:


304

Si desea recorrer cada fila ( <tr>), conocer / identificar la fila ( <tr>) e iterar a través de cada columna ( <td>) de cada fila ( <tr>), 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 solo quieres pasar por las celdas ( <td>), ignorando en qué fila estás, 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
}

3
ex2, table.cells no es compatible con el navegador
EricG

8
@ WilliamRemacle Publiqué esta respuesta hace casi 4 años ... ¡IE 9 ni siquiera era un pensamiento en ese momento!
John Hartsock

@JohnHartsock Lo sé, pero utilicé tu solución y descubrí que no funciona en IE. Es solo un comentario para advertir a los demás ... He votado tu respuesta de todos modos ;-)
William Remacle

función itTable () {document.writeln ("itTable"); tabla var = document.getElementById ("mytab"); para (var i = 0, fila; fila = tabla.rows [i]; i ++) {document.writeln (i); para (var j = 0, col; col = row.cells [j]; j ++) {document.writeln (j); }} document.writeln ("end-itTable"); } ¿Por qué este código no me permite recorrer una tabla similar a la de arriba?
Doug Hauf

Para aquellos (que vienen aquí a través de google) que necesitan una cuña simple y pequeña para table.cells(parchear un código más antiguo / orientado a IE), vea mi respuesta a P: ¿El navegador Firefox no reconoce table.cells?
GitaarLAB

67

Puede considerar usar jQuery. Con jQuery es súper fácil y podría verse así:

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

3
No se puede usar jquery ... la compañía no lo permite. No preguntes por qué.
GregH

21
Esa es una política loca. Siempre puede copiar y pegar las funciones relevantes que necesita de jQuery a su propio código de aplicación. A menos que haya una política contra el uso del código de otras personas en línea, pero no estaría aquí.
Clinton

13
@Judy: No estoy de acuerdo con la "política loca" ... hay muchas razones para no usar jQuery
Bigjim

JQuery es algo que no he usado en mucho tiempo y parece a simple vista algo complejo y difícil de manejar. Pero creo que es solo porque no lo he usado tanto.
Doug Hauf

55
Otra razón para no permitir JQuery es para sitios web integrados, por ejemplo, estoy usando un chip WiFi integrado que solo tiene 250Kb para todo el sitio web. Es un apretón con todas las imágenes tal como están.
Nick

16

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>

En cada paso, mientras el iterador r / c de bucle aumenta y se asigna un nuevo objeto fila / celda de la colección a las variables fila / celda. Cuando no hay más filas / celdas en la colección, se asigna falso a la variable fila / celda e iteración mientras el ciclo se detiene (sale).


en la publicación anterior: while (cell = row [r] .cells [c ++] debe ser row.cells [c ++], row es el objeto actual y un ejemplo para el código sth: mycoldata = cell.innerHTML
fib Littul

12

Tratar

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}


2
limpio, diría yo
Shobi

3

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

¿Es eso incluso JavaScript? Porque su bucle for se parece a PHP.
aravk33

2
Muchos idiomas son sorprendentemente similares cuando sabes qué buscar. PHP usaría un $ delante de cada variable, esto no. var también es una palabra clave utilizada por JavaScript, no PHP, aunque si la agregaron, podría haberla perdido. - edit- gah no enter for newline ... Como digo: la lógica es universal. Saber cómo transcribirlo a idiomas alternativos es una habilidad increíblemente útil que no es difícil de aprender: somos seres de intelecto con excelentes habilidades de coincidencia de patrones. Identifique los cambios entre cada idioma o simplemente use la definición del lenguaje
léxico

3

Si quieres uno con un estilo funcional, así:

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

Puede modificar el prototipo de objeto de HTMLCollection (que permite usar de una manera que se asemeja a los métodos de extensión en C #) e incrustar en él una función que convierte la colección en matriz, lo que permite usar funciones de orden superior con el estilo anterior (tipo de estilo linq en C#):

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

TypeError no capturado: no se puede leer la propiedad 'toArray' de undefined -> Esto es lo que obtuve cuando probé esta solución.
Vineela Thonupunuri

Extraño. Lo intenté de nuevo y funcionó. Sin embargo, no pude reproducir el error que señaló. Quizás el problema es el navegador. Probé usando Edge e IE y ambos no funcionaron. Chrome, Firefox y Safari funcionaron como se esperaba.
l30_4l3X

Yo también usé cromo.
Vineela Thonupunuri

Esto también funciona para mí. El Object.definePropertyobviamente, tiene que pasar antes de que el resto del código, pero funciona. @Vineela Thonupunuri, ¿lo intentaste con el código en el orden correcto?
FlippingBinary

3

Mejor solución: use el nativo de Javascript Array.from()y convierta el objeto HTMLCollection en una matriz, después de lo cual puede usar funciones de matriz estándar.

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

También puede hacer referencia tr.rowIndexy en cell.colIndexlugar de usar row_indy col_ind.

Me gusta mucho más este enfoque sobre la parte superior 2 de más alto votaron respuestas porque no recarga su código con variables globales i, j, rowy col, por tanto, que entrega limpia código y modular que no tenga efectos secundarios (o pelusa de subida / advertencias del compilador) ... sin otras bibliotecas (por ejemplo, jquery).

Si necesita que esto se ejecute en una versión anterior (anterior a ES2015) de Javascript, Array.frompuede rellenarse.


1

Puede usar .querySelectorAll()para seleccionar todos los tdelementos y luego recorrerlos con .forEach(). Sus valores se pueden recuperar 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>

Si solo desea seleccionar columnas de una fila específica, puede utilizar la pseudoclase :nth-child()para seleccionar una específica tr, opcionalmente junto con el combinador secundario ( >) (que puede ser útil si tiene una tabla dentro de una tabla):


1

Usando un solo bucle for:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.