Recorrer las celdas de una tabla con Javascript
Escrito por J.F. el Viernes, 21 de Septiembre del 2007 a las 17:17
En el ejemplo de hoy vamos a ver como recorrer una tabla HTML con Javascript. Para ello nos basaremos en 2 bucles, uno que recoge el número de filas, y en el caso de las columnas deberemos meter nosotros mismos el número, en éste caso son 4. La función Javascript encarga de recorrer la tabla y almacenar todos los registros concatenándolos en una variable es:
-
<script> function datosTextos() {
-
var textos = \\'CONTENIDO_TABLA|\\';
-
for (var i=0;i<document.getElementById(\\'TablaDatos\\').rows.length;i++) {
-
for (var j=0;j<4;j++) {
-
textos = textos + document.getElementById(\\'TablaDatos\\').rows[i].cells[j].innerHTML + \\'|\\';
-
}
-
}
-
alert(textos);
-
}
-
-
</script>
De ésta manera recogemos todos los valores, y los msotraremos en un alert, usando como separador una barra "|". Ésto puede ser eficaz por ejemplo para introducir en el value de un hidden toda la cadena con el contenido de la tabla, y posteriormente con otro lenguaje como PHP o ASP recogerla e ir desglosándolo mediante el separador para ir introduciendo en la base de datos. En el ejemplo de abajo, simplemente al pulsar sobre un botón llamaremos a la función mediante el evento onClick, que nos mostrará en un alert los campos. Aquí tines el código del ejemplo:
-
<script> function datosTextos() {
-
var textos = \\'CONTENIDO_TABLA|\\';
-
for (var i=0;i<document.getElementById(\\'TablaDatos\\').rows.length;i++)
-
{
-
for (var j=0;j<4;j++)
-
{
-
textos = textos + document.getElementById(\\'TablaDatos\\').rows[i].cells[j].innerHTML + \\'|\\';
-
}
-
}
-
alert(textos);
-
}
-
</script>
-
<table class="TablaDatos" id="TablaDatos" border="1">
-
<td>1</td>
-
<td>2</td>
-
<td>3</td>
-
<td>4</td>
-
</tr>
-
<td>5</td>
-
<td>6</td>
-
<td>7</td>
-
<td>8</td>
-
</tr>
-
<td>9</td>
-
<td>10</td>
-
<td>11</td>
-
<td>12</td>
-
</tr>
-
<td>13</td>
-
<td>14</td>
-
<td>15</td>
-
<td>16</td>
-
</tr>
-
</table>
-
<input value="Ver valores de la tabla" onclick="datosTextos();" type="button" />
Observa como en la línea 10 for (var j=0;j<4;j++) debemos poner que j sea menor que el número de columnas, en éste caso 4.
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Comentario de Erik Hernandez
Realizado el Martes, 25 de Marzo del 2008 a las 4:28
En el bloque de codigo de javascript tienes un error con el nombre del id del objeto Table, lo tienes en el codigo javascript TablaDatos y el id de la tabla es tablaDatos enn firefox genera un error en iexplorer no verifique pero por favor corrigelo.
Comentario de J.F.
Realizado el Martes, 25 de Marzo del 2008 a las 8:34
Corregido, gracias por el aviso, pequeño lapsus.
Un saludo 
Comentario de Javier Cedeño
Realizado el Miércoles, 21 de Mayo del 2008 a las 17:34
ese bloque q escribiste solo te coje la etiqueta innerHTML pero no hace lo que dices solo cojer el value
saludos
Nota: no se la solucion tambien ando buscando lo mismo
Comentario de Javier Cedeño
Realizado el Miércoles, 21 de Mayo del 2008 a las 17:50
bueno estuve revisndo y tu codigo recoje los valores pero para recojer solo los values de los imput es codigo seria asi
var obj=$(’nom_tabla’).getElementsByTagName(’tr’);
for (var i=1; i
Comentario de Alvaro
Realizado el Viernes, 18 de Julio del 2008 a las 16:16
Estuve buscando este codigo por mucho tiempo… pero tengo un problema con el mismo: en la parte del codigo donde dice var textos = \\’CONTENIDO_TABLA|\\’; que colocaria alli haciendo referencia al ejemplo de la tabla?
Y tambien en esta parte:
textos = textos + document.getElementById(\\’TablaDatos\\’).rows[i].cells[j].innerHTML + \\’|\\’;
A que hacen referencia los “\\” De antemano le agradezco la atencion prestada, espero pronto su ayuda, me es de mucha importancia… Gracias. ;0)
Comentario de Alvaro
Realizado el Viernes, 18 de Julio del 2008 a las 16:23
Ok Ya pude arreglar el problema que te publique anteriormente, ahora me surge una duda… como hago para recoger estas variables y almacenarlas en una tabla de la base de datos?
Porque el ejemplo muestra 1|2|3|4|5|6|7|8|9|10…
Pero yo necesitaria insertar los primero 4 despues los 4 siguientes, y asi sucesivamente… De antemano muchas gracias. Esta pagina me ha sacado de muchas dudas pero esta vez no logro mezclar el codigo php con el javascript… Nuevamente de antemano muchas Gracias…!!! 
Comentario de jhonpi1027
Realizado el Viernes, 16 de Octubre del 2009 a las 19:18
por favor necesito saber como separar los datos que me arroja el codigo en el aler y mandarlos a una base de datos por medio de un ciclo uno por uno
