JS Administrar tablas Parte 2

1 - Articulo
2 - Ejemplo


ARTICULO

Este artículo se encuentra asociado al de JS Administrar tablas Parte 1, en esta ocación, lo que haremos será crear una función que permita eliminar un registro de tabla y de mofificar la función que agrega los datos.

El comportamiento va a ser el mismo que utilizamos para insertar un registro, es decir, vamos a verificar, en este caso si se ha seleccionado vacio dentro de un select y cuando esto ocurra lo que aremos será eliminar la fila de la tabla.

volver

EJEMPLO

Primero crearemos la función de borrado que llamará a la función que nos retornará la información del nodo padre y abuelo que se necesita para realizar el borrado de los datos, esta quedaría de la siguiente forma:

function funNodoEliminar(oEliminar){
var oPadre = funObtenerPadre(oEliminar, 'TR');
var oAbuelo = funObtenerPadre(oEliminar, 'TBODY');
oAbuelo.removeChild(oPadre);
}


A continuación realizaremos una modificación en la función que agrega nodos a la tabla, quedando esta de la siguiente forma:


function funNodoAgregar(oCargo, oPerfil){
if (oCargo.id != 'sltCargo'){
funNodoEliminar(oCargo);
}else if (oPerfil.id != 'sltPerfil'){
funNodoEliminar(oPerfil);
}else{
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;
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);
}
}
}



Si se observa ahora se controla la llamada de cada uno de los select del código html, pero si para esto se debe agregar tanto en el select de cargo como de perfil la llamada al a la función funNodoAgregar, quedando el código html de la siguiente forma:

<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" onchange="javascript:funNodoAgregar(this, document.getElementById('sltPerfil'));">
<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>


La función de búsqueda del nodo padre se mantiene

Si probamos, ahora podremos ver que se puede agregar, como eliminar filas, cuando se ha seleccionado un cargo y un perfil.

Ahora lo que nos falta hacer es capturar la información de la tabla, para esto utlizaremos el método getElementByTagName, el cual rescatará la información. Ahora bie´n, mensionamos que podríamos pasarle la información a un método de ajax, nosotros en este caso vamos a crear un método que preparará la información para pasarla, esta función se observa a continuación.

function funSelectRescatar(){
var sXml = "<root>";
var lista = document.getElementsByTagName('select');
for (i=0; i<lista.length;i++){

if (lista[i].options[lista[i].selectedIndex].text!=''){
sXml += "<" + lista[i].options[lista[i].selectedIndex].text + ">";
sXml += lista[i].options[lista[i].selectedIndex].value;
sXml += "</" + lista[i].options[lista[i].selectedIndex].text + ">";

}
sXml += "</root>";

alert(sXml);

}

Lo ultimo que nos queda es realizar la llamada a la función que estará definida de la siguiente forma en el código html

<input id="btnEnviar" name="btnEnviar" type="button" value="Enviar" onclick="javascript:funSelectRescatar();"/>
Ustedes pueden trabajar un poco más el código expuesto, ya que yo les he entregado solo las pautas generales, como lo he venido haciendo en todos mis artículos.

Espero que el ejercicio les gustara.

volver