Javascript

En este articulo se muestra como agregar dinamicamente filas (lineas) y celdas (columnas) a una tabla utilizando javascript.

Para agregar una fila, hay que obtener primero la tabla que queremos modificar, despues crear el elemento TR y por ultimo agregarlo a la coleccion de lineas de la tabla:

//obtener la tabla
var tabla = document.getElementById("tabla").getElementsByTagName("TBODY")[0];
var tr = document.createElement("TR"); //crear la nueva fila
tabla.appendChild(tr); //agregar la fila a la tabla

Con esto seria suficiente para agregar una nueva fila a la tabla.

Para agregar una celda hacemos basicamente lo mismo:

1. Obtener la linea a la que queremos agregar la celda
2. Crear el elemento TD
3. Agregar el nuevo elemento a la linea

var tlin = document.getElementById("tabla").rows.length;
var lin = document.getElementById("tabla").rows[tlin-1];
var td = document.createElement("TD");
td.appendChild(document.createTextNode("celda " + parseInt(Math.random()*100)));
lin.appendChild(td);

En este codigo la celda se agregara a la ultima linea de la tabla. El texto en la celda sera "celda" seguido de un numero aleatorio.

Ejemplo

La pagina de ejemplo muestra una tabla y botones para agregar/eliminar filas y celdas. En esta pagina tambien se toma en cuenta que al eliminar la unica celda de una fila, tambien hay que eliminar esa fila.