JavaScript - Agregar filas a una Tabla

 
Vista:

Agregar filas a una Tabla

Publicado por Hernan* (4 intervenciones) el 24/06/2005 01:39:56
Tengo una tabla en HTML con filas, las cuales contienen 3 columnas con inputs en cada una.
Lo que quiero es tener un boton que al presionarlo me agregue una fila completa (con los 3 inputbox) al final de la tabla.
Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Agregar filas a una Tabla

Publicado por Mike79 (49 intervenciones) el 24/06/2005 03:22:59
Ok, explicas muy bien lo que quieres, ¿y la pregunta cual es?.
Supongamos que tu pregunta es: "¿Como puedo hacerlo?"
haa, ok, entonces ahora si podemos responder algo:

Bueno haciendolo rapido y resumido, tienes que utilizar el modelo Dom que se implemento en JavaScript 1.5, de forma resumida primero, tienes que crear tu input y darle propiedades de esta forma:

var inp = document.createElement('input');
inp.name = "Algo1";
inp.type = "text";
inp.value = "Prueba1";

Luego tienes que crear una celda:
var c = document.createElement('td');

Ahora hay que meter el input dentro de la celda de esta forma:
c.appendChild(inp);

Ahora hay que crear un Renglon nuevo:
r = document.createElement('tr');

Y metemos la celda dentro del renglon:
r.appendChild(c);

Si queremos meterle varias celdas a ese renglon, pues todo lo hacemos en un ciclo y santo remedio.

Ahora viene lo dificil, tenemos que encontrar la tabla para meterle ahi el renglon:
var t=document.getElementById('El_Id_De_Mi_Tabla');

Woaw ¿fue dificil verdad?, bueno ahora ahi le metemos el renglon:
t.tBodies[0].appendChild(r);

Por lo general solo tenemos un body y no hay problema de meter el renglon donde no le corresponde, eso es por lo general.

Y listo, tenemos un renglon nuevo con un inpu nuevo. Has esto en un ciclo y tienes todo arreglado. Si te interesa saber más sobre componentes DOM y vives en México, puedes asistir al congreso de Software Libre: http://www.gulev.org.mx/

Este codigo funciona con Mozilla, Firefox, e IE 6+

Saludos!
-
Miguel Angel
Mike79
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Agregar filas a una Tabla

Publicado por Fabian (1 intervención) el 27/05/2006 20:07:01
Miguel, como estas???
Quería corregirte y decirte que este ejemplo no funciona sobre Mozilla, firefox.
Yo soy programador exclusivamente sobre tecnología Firefox y necesitaba algo asi pero no me funciona sobre el browser.
Sí funciona sobre explorer.
Si podes encontrar una solución sobre Mozilla Firefox, avisame.
Gracias!
Saludos.

Fabián.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Agregar filas a una Tabla

Publicado por Ariel (1 intervención) el 23/11/2006 16:24:20
Debes estar haciendo algo mal, el codigo funciona perfectamente en firefox.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Agregar filas a una Tabla

Publicado por Franz (1 intervención) el 07/02/2007 16:59:00
Excelente, no lo he probado, pero en teoria debe funcionar muy bien.

Mi pregunta es la siguiente, como hago ahora si quiero eliminar una celda ?

Saludos !!!

Franz
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar