29.10.07

Tablas: Insertar filas y celdas dinámicamente

Recientemente, corrigiendo unas páginas muy IE, me tope con un problemilla que nunca tuve antes en este asunto de tener todo cross-browser, porque -sinceramente- con el mercado que tenían los otros navegadores, en mi empresa sólo escribíamos para IE.

El temas es que me encontré con un código que creaba dinámicamente filas y celdas en una tabla utilizando los métodos insertRow e insertCell. Cuando lo probé en Firefox falló y pensé, inicialmente, que no existían con esos nombre los métodos. Pero no fue así.

Para graficarlo mejor, el código IE es algo así:

var myTable = document.getElementById('myTable');
var oRow = myTable.insertRow();
var oCell = oRow.insertCell();
var oCell.innerHTML = 'contenid de la celda';

Para que este sea cross-browser se debe escribir así:

var myTable = document.getElementById('myTable');
var oRow = myTable.insertRow(-1);
var oCell = oRow.insertCell(-1);
var oCell.innerHTML = 'contenid de la celda';

Donde -1 indica al DOM que debe agregar la fila o la celda al final.

2 Comentarios:

Anónimo dice...

Un blog muy completo e interesante, pero, puedo hacerte un apunte? me quema la vista lo de "SuscriVirse a: Enviar comentarios (Atom)" buscaba tu mail para avisarte así en lugar de poner un comentario, pero no lo tienes publicado, borra mi post si quieres, no tiene nada que ver con tablas ni celdas, pero hace muy feo ver algo así en un blog tan currado.
Perdona otra vez el off-topic.

Julio González Seara dice...

Te agradezco el comentario, pero lamentablemente ese texto lo pone automáticamente Blogger. Ni siquiera está en mi plantilla.

Saludos.