Manipulación fácil del DOM de una tabla con MooTools

Como mencioné anteriormente, he utilizado MooTools en algunos de los proyectos que he realizado con la Fundación donde trabajo. Una de las funcionalidades que frecuentemente se requiere implementar es la de permitir agregar y remover dinámicamente filas o registros a una tabla, para esto utilizamos JavaScript. El diseño que mas utilizamos es la mas simple de todas: manipular el DOM de la tabla localmente en el cliente y dejarle el trabajo a la aplicación del lado del servidor de manejar el almacenamiento de los registros.

Históricamente realicé una primera versión de esta funcionalidad utilizando las funciones de manipulación del árbol DOM de JavaScript pero no tenía experiencia con ellas y apenas estaba aprendiéndolas por lo que su diseño poco eficiente con una implementación terrible. Después conocí las librerías de JavaScript e hice una segunda versión utilizando MooTools; el resultado fue algo mejor, sin embargo no muy eficiente: debía crearse funciones JavaScript (implementación incluída) por cada tabla que se fuera a manipular :-|. Aún no conocía el buen uso de las funciones $ y $$.

Ahora he creado una nueva versión que como lo que me gusta … es muy simple. Permite agregar y remover filas de cualquier tabla e inclusive permite manejar varias tablas en la misma página que se identifican con su atributo id a través de un único conjunto de funciones que se incluyen a través de una etiqueta <script>.

En el script se definen dos funciones: TDAgregarRegistro(tablaId) y TDRemoverRegistros(tablaId) que permite agregar y remover filas (seleccionadas) de una tabla respectivamente.

El usuario deberá por su parte definir las siguientes funciones para determinar comportamiento de las funciones base.

  1. obtEstructuraRegistro(tablaId): determina la estructura de las filas o registros de la tabla.
  2. obtPropiedadesCampo(tablaId): determina las propiedades o atributos de un campo de la tabla.
  3. obtPropiedadesFila(tablaId): determina las propiedades o atributos de una fila de la tabla.

Cada una de estas funciones recibe el id de la tabla a la cual se hace referencia, con este valor la función deberá determinar su respuesta, la cual es un arreglo asociativo. Por la simplicidad requerida por la solución, por ahora se soportan dos tipos de campos: de texto y de selección.

Enlaces:

Artículo relacionado: Manipulación fácil del DOM de una tabla con Prototype.

13 thoughts on “Manipulación fácil del DOM de una tabla con MooTools”

  1. Hola Buenas noches me parecio interesante este tema del manejo de las tablas por medio de mootools, porq realmente estoy necesitando este codigo para el manejo del detalle del pedido. Estoy utilizando tablas, y descargue el codigo que colocaste en la pagina pero no funciona, ni siquiera el ejemplo de demostracion sirve. Si pudieras actualizar el link te lo agradeceria y muchos de los estudiantes de la Universidad que necesitamos este codigo estariamos agradecido de tu persona y por supuesto de tu pagina. De antemano muchas gracias espero pronto tu respuesta.

  2. Álvaro, cordial saludo.

    Efectivamente el script de demostración estaba presentando problemas con Internet Explorer aunque con Firefox funcionaba bien. Raro no ?

    Desgraciadamente el IE de mi partición de Windows Vista no estaba funcionando y tuve que reinstalar el sistema operativo para poder verificar el error, eso me tomó un par de días.

    Arreglado el pequeño incoveniente con la lista de selección actualicé la demostración a la versión 0.1.1, la cual puede ser accedida a través de los enlaces del artículo.

    El ejemplo es una demostración de la manipulación del DOM con MooTools, no fue desarrollado con ningún fin en particular, así que, como todo en el sitio, se reciben sugerencias constructivas al respecto.

    Suerte con el proyecto.

  3. Hola, Tu forma de agregar y remover filas con el manejo de Mootools era lo que estaba buscando, lo probe en mi proyecto y funciona perfectamente, lo que me gustaria, si pudieras colaborarme es en un problemita que me surgio al agregarle el uso del evento keypress en los campos de cada registro, al parecer funciona en IE pero en Mozilla no lo hace correctamente.

    Veras despues de crear el nuevo elemento>
    –var campo = new Element(‘td’, (obtPropiedadesCampo(tablaId) != null) ? obtPropiedadesCampo(tablaId) : {});

    campo.setProperty(‘class’, campo.getProperty(‘class’) + ” TDCampo”);–

    utilizo un if para id que campo debe utilizarse el evento keypress asi>
    –if (estructura[i][‘id’] == “cantidad_” + n) {

    campo.addEvent(‘keypress’, function(event){return validaCaracter(event, ‘num’);});

    campo.setProperty(‘class’, campo.getProperty(‘class’) + ” TDCampo”);}—

    La funcion “validaCaracter” la uso en este caso para numeros, funciona en IE pero Mozilla me deja pasar caracteres. Ojala puedas colaborarme, Muy agradecido de antemano. Tambien soy Colombiano. Gracias por este aporte.

  4. Naty-Chan, cordial saludo.

    Si bien te entiendo, lo que necesitas es un validador para los campos de texto.

    Estuve haciendo algunas pruebas e implementé un validador muy simple que puede servirte como referencia. Actualicé el ejemplo de demostración con él a la versión 0.2.

    Mira el campo ‘Edad’, el cual sólo puede recibir números como ejemplo.

    Te invito a que revises en el código a la función ‘TDValidarDato’ que es la encargada de definir si lo digitado es válido o no y por ende, contiene los diferentes tipos de validaciones disponibles.

    Espero que te sea de utilidad.

  5. Hola Jorge Iván, Otra vez yo!

    Ojala puedas volverme a colaborar, como te comente he necesitado implementar este tipo de tablas en varios formularios y es la primera vez que uso DOM, ahora se trata de llenar los items de un registro de obtEstructuraRegistro con datos de una consulta a la BD, no me ha funcionado lo que he probado y no se que estoy haciendo mal, he probado la consulta y trae los datos necesarios.
    Bueno lo que tengo en esta funcion esta asi, (hago uso de una clase de php para hacer las diferentes operaciones a la BD):

    function obtEstructuraRegistro(tablaId) {
    var registro = new Array();
    if(tablaId == “lista_insumos”){
    procesaSQL($consulta);
    if(!$almacen->errorTareas) {
    if($almacen->res->num_rows>0){
    $cant=$almacen->res->num_rows;
    ?>
    registro[0] = { …};
    registro[1] = { ‘elemento’ : ‘select’,
    ‘id’ : ‘articulo_’+numRegistro,
    ‘name’ : ‘articulo_’+numRegistro,
    ‘class’: ‘myinputstyle’,
    ‘items’ :
    res->fetch_array()){
    echo “‘”.$fila[‘nom_articulo’].”‘:'”.$fila[‘id’].”‘”;
    if ($cont
    }; // cierre items registro[1]
    ….return registro}
    return null}

    Al crear el registro en Mozilla aparecen los campos sin embargo no aparecen las opciones de este select. En IE la pagina tiene errores. Como te dije no se error estoy comentiendo o me falta agregar algo, pues he probado esta consulta para un select manualmente.

    Muy Agradecida por tu colaboración.
    ahh Gracias por Agregarme en el Facebook! XD

  6. Hola Jorge Iván,

    Que pena creo que ya he podido solucionar mi problema, al parecer por lo que lei en un foro no es posible ejecutar codigo php en un archivo.js ya que al poner esta función en el php de formulario, ha funcionado como debería aunque todavia no lo hace en IE, que problema esta incompatibilidad! bueno de todas formas, reitero mi agradecimiento por tu colaboracion! Hasta Pronto.

  7. muy buena la solución para la entrada de datos de esta forma pero necesito que me ayuden para ver
    cómo puedo definir un registro en una tabla de tipo select y que me tome los campos de mysql nombre y codigo sustituyendo la lista fija de valores, ya sea usando la versión de prototype o de mootools
    Gracias de antemano.

  8. Hola, mi pregunta es la siguiete, de que manera se puede jugar con los valores de cada una de las cajas de texto, por poner un ejemplo: cuando salga de una caja de texto q esta se sume con otra o que se multiplique y que el resultado se muestre en otra caja de texto

  9. exacto de esa manera.yo la verdad que desconozco mucho acerca de este tema, de lo que es mootools pero estoy super interesado en aprender. quisiera que me mostraras como crear una funcion que valla haciendo una operacion(+-*/) en cada una de las filas, como si se tratara de una orden de compras,con las funciones de mootools comentariadas porque la verdad que hay muchas que no las entiendo. estoy leyendo un manual espero que al final de leerlo tenga mas entendimiento. Gracias

  10. hola que ta mira el demo esta super perfecto pero tengo una duda como pudo hacerle para conectarlo con php y mysql par insertarlos en una tabla gracias espero y me contestes

Leave a Reply

Your email address will not be published. Required fields are marked *