Para este ejemplo me base en una petición de un usuario Anónimo que me comentaba que necesitaba pasar datos de una tabla (html) a un arreglo en js. y pues bueno, espero que este ejemplo le sirva.
Anímense a poner su nombre y dejar sus comentarios no importa si es para preguntar, añadir algo al ejemplo, corregir, etc. todo se vale menos insultar pues para eso estamos, compartir información para facilitarnos un poquito la existencia jejeje.
bueno que es lo que este ejemplo tan sencillito hace, va a contar las filas que contiene la tabla , y despues va a obtener el valor contenido en cada fila y lo va a guardar en un arreglo de js. para que pues para utilizarlo despues en alguna cosa jajaja, pasarlo a una base de datos o cualquier otra cosa aqui simplemente ese arreglo lo vamos a convertir en cadena para poder mostrarlo. ok
ok veamos el código y luego les explico más:
<HTML>
<HEAD>
<TITLE>java script y Html</TITLE>
<script>
function contarrows(){
var miArray=new Array()
var i=0
var tabla = document.getElementById("tdatos");
var total=tabla.rows.length
alert(total);
for(j=1;j<=total-1;j++){
var dato=tabla.rows[j].cells[0].childNodes[0].nodeValue
miArray[i]=dato
i=i+1
var arreglo=miArray.toString();
alert(arreglo);
}
}
</script>
</HEAD>
<BODY>
<H2>Ejemplo1: tablas y js </H2>
<br /><br />
<table id="tdatos" border="1" cellpadding="5px" width="400px">
<tr><td><b>Usuarios</b></td></tr>
<tr><td>Usuarios1</td></tr>
<tr><td>Usuarios2</td></tr>
<tr><td>Usuarios3</td></tr>
</table>
<br /><br />
<input type="submit" onclick="contarrows();" />
</BODY>
</HTML>
Despues tenemos una tabla con el id="tdatos" el id es super importante por que con este es que la vamos a mandar llamar.
Como pueden ver tenemos 4 filas, la que va a servir como titulo o encabezado de la tabla que contiene el texto "Usuarios" y después tenemos otras 3 filas respectivamente usuario1, usuario2, usuario3.
Y por último pero muy importante un botón que en su evento onclick vamos a mandar llamar la función "contarrows();" que se encuentra en nuestro script.
Y tenemos la funcion contarrows().
Ahora el script, pueden ver que declaré una variable de tipo Array() que se llama miArray() y una variable i que le di el valor de 0 esta nos va a servir como contador.
Tenemos una variable tabla que va a ser igual al objeto "tdatos" (o sea la tabla que hicimos), la vamos a buscar por medio del id por eso es importante.
Y tenemos una variable que se llama total . que va a ser igual a tabla.rows.length esto nos va a regresar el total de filas que contiene el objeto tabla. Este valor lo estamos imprimiendo por medio de un alert(total) y cuando corren el ejemplo lo que les muestra es un 4 por que, bueno pues son 4 filas jeje.
Después tenemos dentro de un for la variable dato, la variable dato va a ser igual a:
tabla.rows[j].cells[0].childNodes[0].nodeValue
esto que significa :tabla: es el objeto "tdatos" que buscamos por medio del id.
rows[j]: Es la fila o para que mejor se entienda es la etiqueta <tr> dentro de la tabla. Ahora es muy importante esto, rows[] y cells[] siempre empiezan a contar apartir de 0 (el primer <tr> es el 0), pero como pueden ver en el código yo estoy iniciando a la variable j en 1 esto es por que el primer <tr> es el título o cabecera de la tabla y ese valor no lo quiero guardar en el arreglo.
cells[0]: Es la celda (<td>) dentro de la fila (<tr>)
childNodes[0]:El objeto dentro de la celda (<td>), en el ejemplo tenemos solo texto pero si por ejemplo tuvieras 2 objetos dentro del <td> un <input/> y un <label> según el orden que aparezca en el código sera como lo llames el <input> sería el 0 y el label el 1.
nodeValue: El valor del objeto dentro de la celda (en el ejemplo sería "Usuario1..." respectivamente)
En resumen dato va a ser igual al texto que haya en cada fila.
Este dato lo vamos a almacenar en nuestro arreglo miArray[i]=dato. Acuérdense que a i le dimos el valor de 0 antes de la función;
Después con i=i+1 (i++) estamos incrementando la variable para que el próximo valor en el arreglo sea 1 y no se repitan los indices si no marcaría error.
Ahora declaramos otra variable que se llama arreglo va a ser igual a miArray() convertido en texto esto lo hacemos con miArray.toString(); y lo imprimos en un Alert(arreglo).
Esto se estará repitiendo según el valor de la variable total (el número defilas).
Y listo esto sería todo. Lo contenido en la variable arreglo se puede mandar por Ajax, o por Post o por Get y hacer diferentes usos con esa información.
Espero que este ejemplo les sirva. saludos, comentarios, dudas, quejas, sugerencias todo y más no duden en escribirlo aquí abajo...
"Programar no tiene que ser tan difícil como parece...."
Gracias por el aporte herman@
ResponderEliminarsaludos gracias x pasar!!!
EliminarY si en cambio queremos revisar si uno de los datos se repite en el array, por medio del ciclo que inicias como seria?
ResponderEliminarmmm se me ocurre que hagas otro for dentro del primero tomas el valor de la tabla y antes de agregarlo en el arreglo primero lo corres y lo comparas si el dato coincide que no lo meta y si no coincide que lo meta.
EliminarHola yo quiero hacer una pregunta como lo puedo hacer para que cada ves que le doy click en una celda me guarde su valor en una varible
ResponderEliminarSaludos
Excelente!!! Ahora a ver como guardar la fila y no la columna, muuuuy chido!!! (y)
ResponderEliminarMuchas gracias
ResponderEliminarBuenas, y si quisiera saber el numero de columnas de la tabla en vez de filas, se podría hacer?
ResponderEliminar