JS Administrar tablas Parte 1

1 - Articulo
2 - Ejemplo

Próximo artículo (Programación en tres capas con VS 2005 o superior). Resumen. Podemos apreciar que siempre se habla de programación a tres capas, pero que mejor que hacerlo orientado a objetos, resultado de un análisis y diseño bien realizado, que permite separar, los métodos de una clase y ponerlos en las distintas capas. Una vez escuche que: microsoft, al definir una herramienta de programación, no permitía programar a tres capas y orientada a objetos. Esto es una rotunda mentira, la filosocía de programación orientada a objetos no tiene que ver con un seudo lenguaje, claro está que una herramienta de desarrollo que facilite esta tarea, siempre es bien recibida. Otra vez escuche que LINQ presentaba problemas al programar orientado a objetos (Esto también es mentira, se puede definir perfectamente una capa de acceso a datos con linq y definir en clases de esta capa, los métodos que realizan las solicitudes a la base de datos). El próximo articulo, amigos míos, biene bueno.

ARTICULO

Siempre tenemos algunos problemas al definir el comportamiento funcional de una aplicación Web, generalmente cuando tenemos que realizar la definición de una nueva fila en una tabla, realizamos una solicitud al servidor para que refreque la página y agrege la fila deseada. Luego, cuando tenemos la información cargada, nviamos la información a servidor para que tome la información de las columnas u las procese para realizar una acción.

Ahora en este pequeño artículo veremos como, en el cliente, podemos agregar una nueva fila o quitar una fila de una tabla. para dejarla lista para ser procesada ya sea un un envio al servidor o por una captura de información de la misma y envío de información a través de ajax con un formato definido.

En este artículo veremos como agregar o quitar nodos y como capturar la información que se ha definido, el traspaso de la información al servidor a través de una función o método en ajax o ajaxpro se los dejo a ustedes. Ya hemos publicado artículos de como de debe pasar la información al servidos.

volver

EJEMPLO

Lo primero que debemos considerar antes de hacer cualquier cosa es definir la tabla con la cual vamos a trabajar, y dependiendo de donde vamos a agregar la información debemos de considerar el nodo en cuestión, es decir:

- Si trabajamos con un control fuera de la tabla, debemos trabajar con la tabla directamente.

- Si trabajamos dentro de la tabla, lo mejor y para que nos funcione en todos lados, buscaremos el tbody de la misma para agregar un nuevo nodo.

Se debe considerar que cuando se programa, lo tbody no se definen en muchos casos, pero si muchos navegadores lo agregan y esto puede ser un problema.

Al final de las líneas de código voy a agregar el html en esta hoja para que vean el comportamiento funciónal.

Lo primero que debemos hacer es definir la tabla que utilizaremos y en la primera fila agregaremos dos combos que nos permitirán agregar la información a la tabla

<table border="1" cellpadding="0" cellspacing="0" id="tbl" width="350px">

<tr>

<td>Selecccione cargo</td>

<td>Seleccione perfil</td>

</tr>

<tr>

<td>

<select id="sltCargo">

<option></option>

<option value="1">Ingeniero</option>

<option value="2">Analista Orgánico</option>

<option value="3">Analista Programador</option>

<option value="4">Programador</option>

</select>

</td>

<td>

<select id="sltPerfil" onchange="javascript:funNodoAgregar(document.getElementById('sltCargo'), this);">

<option></option>

<option value="1">Senior</option>

<option value="2">Medio</option>

<option value="3">Junior</option>

</select>

</td>

</tr>

</table>

Ahora agregaremos en una zona de script, la función que nos permitirá, primero, identificar en que nodo debemos agregar el nuevo elemento y luego agregar el elemento, para ello, primero recorreremos los nodos hasta llegar al definido con tegName TBODY, como se muestra a continuación:

function funObtenerPadre(oObjeto, strObjeto){

var oPadre = oObjeto.parentNode;

for (i=0; i<10;>

if (oPadre.tagName==strObjeto){ break; }

else{ oPadre = oPadre.parentNode; }

}

return oPadre;

}

La función antes descrita debe ser llamada desde otra función, la cual estará encargada de agregar el nuevo nodo, para ello debemos hacer la siguiente acción:

function funNodoAgregar(oCargo, oPerfil){

if (oCargo.options[oCargo.selectedIndex].text!='' &&

oPerfil.options[oPerfil.selectedIndex].text!=''){

var ooCargo = document.createElement("SELECT");

var ooPerfil = document.createElement("SELECT");

var tb = funObtenerPadre(oCargo, 'TBODY');

ooCargo = oCargo.cloneNode(true);

ooPerfil = oPerfil.cloneNode(true);

oCargo.id = oCargo.options[oCargo.selectedIndex].value;

oPerfil.id = oPerfil.options[oPerfil.selectedIndex].value;

oPerfil.onchange="";

var tr = document.createElement("TR");

var td1 = document.createElement("TD");

var td2 = document.createElement("TD");

td1.appendChild(ooCargo);

td2.appendChild(ooPerfil);

tr.appendChild(td1);

tr.appendChild(td2);

tb.appendChild(tr);

}

}

Comentemos el código:

Primero vamos a crear dos objetos de tipo SELECT, los cuales se cargarán clonando los controles al hacer click en el segundo select, luego crearemos los objetos que vamos a agregar a la tabla, como son los TD's y el TR.

Al ir definiendo cada objeto, debemos ir colocándolo dentro de cada óbjeto padre, es decir, los SELECT dentro de los TD's, los TD's dentro del TR y el TR dentro del objeto rescatado de la tabla como padre, que en este caso es el TBODY.

volver