12 de mayo de 2008
Comentarios (0)
En este articulo voy a mostrar como generar dinamicamente una tabla html, agregarle y quitarle rows asi como editar su contenido.
Para crear una tabla via JavaScript necesitamos saber donde va a ser colocada. Podemos colocarla a lo ultimo en el documento o mas especificamente dentro de un tag DIV comun. Como segunda premisa vamos a ver que funcionalidad tendria nuestro script. Queremos que cuando el boton BUILD sea presionado comience la construccion de nuestra tabla. Empecemos con el codigo.
window.onload = init;
// utility function
function get(id) {
return document.getElementById(id);
}
// uso de non-intrusive javascript
//para setear un evento en un boton
function init() {
get("mybutton").onclick = buildTable;
}
function buildTable() {
// the table object
var table = document.createElement("table");
table.border = "1";
// create one row at index 0
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "value in cell1";
cell2.innerHTML = "value in cell2";
// now append the cell to the div
get("targetDiv").appendChild(table);
}
Y el codigo HTML... :D
<div id="targetDiv"></div>
Aca abajo podes probarlo.









