¿Cómo crear tablas de forma dinámica? ¿Cómo insertar y eliminar filas de una tabla ya existente? En este tutorial aprenderás cómo hacerlo usando ajax (javascript + dom en este caso).
Imaginemos que tenemos un div y queremos meter ahí dentro una tabla que vamos a crear "al vuelo". Primero necesitamos tener un identificador para el div. Luego creamos la tabla de forma dinámica y por último metemos la tabla dentro del div.
Para seleccionar el div haremos esto: var div = document.getElementById('identificador del div');
Para crear la tabla haremos esto: var table = document.createElement('table');
Ahora ya tenemos la referencia al div dentro de la variable div, y la referencia a la tabla dentro de la variable table. Lo siguiente sería añadir filas a la tabla. Después añadir celdas a las filas. Y al final meter la tabla dentro del div.
Para añadir una fila hacemos esto: var row = table.insertRow(0);
Fíjate, usamos el objeto de la tabla (table) y llamamos al método insertRow el cual recibe como parámetro la posición donde hay que insertar la fila. En este caso hemos insertado la fila en la posición 0, es decir, en primera posición. Y además nos hemos guardado la referencia a esa fila que acabamos de insertar en la variable row. Gracias a esto podremos añadirl celdas a esa fila.
Para añadir una celda haremos esto: var cell = row.insertCell(0);
Fíjate, usamos el objeto de la fila (row) y llamamos al método insertCell el cual recibe como parámetro la posición donde hay que insertar la celda. En este caso hemos insertado la celda en la posición 0, es decir, en primera posición. Y además nos hemos guardado la referencia a esa celda que acabamos de insertar en la variable cell. Gracias a esto podremos modificar las propiedades de la celda, su contenido, etc.
Para meter la tabla dentro del div haremos esto: div.appendChild(table);
Vamos a poner un ejemplo de creación de una tabla con dos filas y tres celdas en cada una de ellas.
var table = document.createElement('table'); var row_0 = table.insertRow(0); var row_1 = table.insertRow(1); var cell_0_0 = row_0.insertCell(0); var cell_0_1 = row_0.insertCell(1); var cell_0_2 = row_0.insertCell(2); var cell_1_0 = row_1.insertCell(0); var cell_1_1 = row_1.insertCell(1); var cell_1_2 = row_1.insertCell(2);
Ahora vamos a modificar las celdas. Les pondremos un borde y también pondremos un texto en su interior.
cell_0_0.style.border='solid 1px black'; cell_0_1.style.border='solid 1px black'; cell_0_2.style.border='solid 1px black'; cell_1_0.style.border='solid 1px black'; cell_1_1.style.border='solid 1px black'; cell_1_2.style.border='solid 1px black'; cell_0_0.innerHTML='Celda 1'; cell_0_1.innerHTML='Celda 2'; cell_0_2.innerHTML='Celda 3'; cell_1_0.innerHTML='Celda 4'; cell_1_1.innerHTML='Celda 5'; cell_1_2.innerHTML='Celda 6';
Aquí tienes un ejemplo de cómo quedaría:
Si lo que queremos es añadir o quitar filas de una tabla ya existente, lo que podemos hacer es crear dos funciones para ello. Necesitaremos además que la tabla tenga un identificador para poder seleccionarla. También deberemos tener en cuenta el número de filas de la tabla para no pasarnos borrando filas. Esto también nos servirá para poder insertar filas al final de la tabla en vez de al principio.
Veamos el ejemplo de la función para añadir filas con dos celdas a la tabla. Las celdas tienen que tener fondo rojo, borde azul y el número de la fila en su interior.
function addRow(tableId) { var table = document.getElementById(tableId); //Guardamos en una variable la cantidad de filas que tiene la tabla. //esta variable tambien nos servira para indicar que la fila se tiene //que insertar al final de la tabla.Es una ventaja que las posiciones //empiecen en cero. var pos = table.rows.length; var row = table.insertRow(pos); var cell_0 = row.insertCell(0); var cell_1 = row.insertCell(1); cell_0.style.background='red'; cell_0.style.border='solid 1px blue'; cell_0.innerHTML=pos; cell_1.style.background='red'; cell_1.style.border='solid 1px blue'; cell_1.innerHTML=pos; }
Veamos ahora el ejemplo de la función que elimina filas. Sólo borrará si la cantidad de filas es mayor que cero. Si es igual a cero, no hay filas, entonces no hay nada que borrar. Y además borrará siempre la última fila.
function delRow(tableId) { var table = document.getElementById(tableId); //Guardamos en una variable la cantidad de filas que tiene la tabla. //esta variable nos servira para saber si hay filas que borrar y además //podremos hacer que borre la última. var pos = table.rows.length; if ( pos > 0) { --pos; table.deleteRow(pos); } }
Vamos a ver su funcionamiento con un ejemplo. Una tabla cuyo identificador es "mitabla" y dos botones, uno para añadir filas y otro para borrarlas.
| 0 | 0 |
El código de los botones es este:
<input type="button" onclick="addRow('mitabla');" value="+" /> <input type="button" onclick="delRow('mitabla');" value="-" />
Y el código de la tabla es este:
<table id="mitabla"> <tr> <td style="background: red; border: solid 1px blue;">0</td> <td style="background: red; border: solid 1px blue;">0</td> </tr> </table>