Uno de los post más visitados y más agradecidos es el de agregar filas dinamicamente con xajax. En este mucho se topan con la desdicha que no quieren utilizar xajax en sus proyecto proque no quieren o utilizan otro lenguaje para trabajar que no es PHP que es el lenguaje que se utiliza para xajax. Bueno, para todos aquellos que les sucede esto, he preparado un pequeño ejemplo de como se podría hacer lo mismo desde javascript sin ningún framework. Vamos allá.

La solución es muy similar a la anterior. Se crea una fila mediante el comando createElement y luego se añade al DOM mediante appendChild. Por supuesto he agregado un control de filas para poder eliminar una fila desde cualquier posición.
un ejemplo de lo que digo es el siguiente:

function agregarFila(obj){
	obj.value = parseInt(obj.value) + 1;  //aumentamos el id de los campos
	var oId = obj.value;
//esto hay que hacerlo para cada campo.
	var nombre = document.getElementById("txtNombre");  //uno de los campos
	var strHtml1 = nombre.value + '
<input id="hdnNombre_' + oId + '" name="hdnNombre_' + oId + '" type="hidden" value="' + nombre.value + '" />' ; // html a agregar
	var objTr = document.createElement("tr");  //se crea una fila
	objTr.id = "rowDetalle_" + oId;  //asignamos una id para manipularlo despues.
	var objTd1 = document.createElement("td");  //creamos cada td
	objTd1.id = "tdDetalle_1_" + oId;  //asignamos una id
	objTd1.innerHTML = strHtml1;  // asignamos el html al td
	objTr.appendChild(objTd1); // agregamos el td a la fila
	var objTbody = document.getElementById("tbDetalle");  //Seleccionamos el contenedor de las filas
	objTbody.appendChild(objTr); // agregamos la fila al contenedor
	return false;	//evita que haya un submit por equivocacion.
}

Para eliminar una de las filas el proceso es algo similar aunque no por ello más complicado. Se debe seleccionar el objeto a eliminar, averiguar su pardre y decirle a este que elimine el objeto deseado mediante el metodo removeChild. veamos como se hace

function cancelar(){
	var obj = document.getElementById('tbDetalle');
	var objPadre = obj.parentNode;
	objPadre.removeChild(obj);
	obj = document.createElement("tbody");
	obj.id = 'tbDetalle';
	objPadre.appendChild(obj);
	return false;
}

Espero que les sirva y que lo puedan utilizar. Si se les ocurre alguna mejora, o quieren comentar algo, solo haganlo.

Este ejemplo lo puedes ver en el siguiente enlace:

ejemplo funcionando de Agregar Filas con JavaScript

Tambien puedes decargar estos ejemplos:

	archivos de Agregar Filas con JavaScript
Si te gustó o te sirvió, ya sabes que hacer

Esta entrada fue publicada el Jueves, 3 de Septiembre de 2009 a las 15:55 y está clasificada bajo: JavaScript. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.