Publicentral.com - promocion de paginas webpromocion de paginas web
Mostrando Codigo - Javascript
Code

Javascript - Agregar celdas a tabla dinamicamente

Códigos Javascript

Este sencillo script consigue agregar tantas celdas como deseemos a una tabla dinamicamente.
Visitas: 51,205 - 27/10/2003 23:36:19
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <HEAD>
  2. <SCRIPT LANGUAGE="JavaScript">
  3. function agrega_celda(id){
  4.     var tbody = document.getElementById
  5. (id).getElementsByTagName("TBODY")[0];
  6.     var row = document.createElement("TR")
  7.     var td1 = document.createElement("TD")
  8.     td1.appendChild(document.createTextNode("columna 1"))
  9.     var td2 = document.createElement("TD")
  10.     td2.appendChild (document.createTextNode("columna 2"))
  11.     row.appendChild(td1);
  12.     row.appendChild(td2);
  13.     tbody.appendChild(row);
  14.   }
  15. </script>
  16. </HEAD>
  17. <BODY>
  18. <a href="javascript:agrega_celda('mi_tabla')">Agrega nueva</a>
  19. <table id="mi_tabla" cellspacing="0" border="1">
  20.   <tbody>
  21.     <tr>
  22.       <td>Celda1_columna1</td>
  23.       <td>Celda1_columna2</td>
  24.     </tr>
  25.   </tbody>
  26. </table>
  27. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Agregar celdas a tabla dinamicamente" href="http://www.tutores.org/codigo/798/" target="_blank">Agregar celdas a tabla dinamicamente</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
len
4 5
no sirve el codigo..
Comentario usuario
len
3 5
Copiando el codigo no sirve.. solo probandolo y ejecutando el codigo desde la pagina..
Comentario usuario
len
5 5
Gracias, me salvaste de una buena.. mil gracias
Comentario usuario
nachostyle
2 5
Gracias... el codigo me funciono perfectamente.
Comentario usuario
01-12-2007 02:22:42
4 5
como puedo borrar una celda especifica que cree dinamicamente?
Comentario usuario
15/09/2004 22.54.59
4 5
Para que funcione tienen que encerrar el codigo entre las etiquetas
<html> y </html>
Comentario usuario
jimbo
2 5
gracias amigo tu codigo realmente es lo ke andaba buscando por la red :D
Comentario usuario
jorgis
1 5
sirve el codigo trankilamente.
Comentario usuario
jorgis
4 5
por cierto como se hace para borrar celdas?
Comentario usuario
Syrem
2 5
Hola.!! Tu codigo me ha servido de mucho. Ahora estoy necesitando agregarle color a la tabla y celdas que se generan dinamicamente con ese codigo. Sabes alguna forma de hacerlo.? yo pude darle aliniacion pero no he podido encontrar la forma de darle color.
Te agradeceria mucho tu ayuda.
Comentario usuario
15-02-2008 17:28:18
5 5
asignale una clase ps!!

setAttribute

No he probado pero deberia funcionar!!
Comentario usuario
23-08-2008 19:12:08
2 5
hola por favor ayudenme, necesito urgentemente para mañana esto tengo una tabla en javascript al dar click agrego filas n filas pero tengo un boton eliminar que quiero que elimine cualquier fila de la tabla puede er la primera la ultima o la de intermedio pero a la vez
Por favor ayudenme
Comentario usuario
06/07/2004 17.04.57
4 5
Cómo se le ingresa un contenido a la celda?

Gracias.
Comentario usuario
23/10/2003 10.47.59
3 5
excelente código.... muy bien hecho y más didactico imposible. Solo que ....hay que poner los punto y coma en varios renglones. Corrigan eso.

Pero anda perfectamente. Bien para DUMMIES
Comentario usuario
03-02-2009 19:04:53
2 5
Era lo que buscaba.... duda , como seria esto pero con una sentencia select? buscando ovbiamente por id en un input?
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.