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

El día de hoy realicé la migración del pequeño script de manipulación DOM de tablas de su versión de Mootools a Prototype.  La versión 0.1 está basada en la versión 0.2 del primero y fue desarrollado con la versión 1.6.0.2 de la librería.

Básicamente es el mismo JavaScript, permite agregar y remover filas de una tabla dinámicamente desde el lado del cliente.

La distribución incluye a las siguientes funciones.

  • TDAgregarRegistro(tablaId): agrega una nueva fila a la tabla identificada con el id tablaId.
  • TDRemoverRegistro(tablaId): remueve a las filas seleccionadas de la tabla identificada con el id tablaId.
  • TDValidarDato(valor, tipo, opciones): determina si un dato es válido según el tipo de verificación elegido.

La implementación de esta funcionalidad requiere que se implementen las siguientes funciones en la página cliente.

  • TDObtEstructuraRegistro(tablaId): determina la estructura de las filas o registros de la tabla cuyo id es tablaId.
  • TDObtPropiedadesCampo(tablaId): determina las propiedades o atributos de un campo de la tabla cuyo id es tablaId.
  • TDObtPropiedadesFila(tablaId): determina las propiedades o atributos de una fila de la tabla cuyo id es tablaId..

Al igual que la versión 0.2 con Mootools, incluí un validador sencillo para los datos de entrada basado en el campo validador de la especificación y que utiliza directamente a la función TDValidarDato.  Ver el campo edad del ejemplo de demostración.

Por ahora la validación continúa con un problema que no he logrado solucionar: el evento incluye el código de la tecla presionada sin importar si era en mayúsculas o minúsculas, dificultando validar esta sensibilidad.  Esto es particularmente importante para el caso de los números ya que 2 y @ estarían significando lo mismo para el validador.

Enlaces:

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

  1. muy buen aporte pero soy muy novato en esto como le puedo hacer para que con tu ejemplo pueda guardar todo los campos un BD me seria de gran utilidad para un proyecto de la escuela

  2. Saludos Zerokull. El almacenamiento de la información (y posterior despliegue de los datos guardados) lo debes realizar normalmente en una base de datos utilizando un lenguaje del lado del servidor como por ejemplo PHP.

    Para almacenar la información, la tabla deberá ir inmersa en un formulario y la recibirá un script en PHP que convertirá la información a los INSERTs apropiados.

    En caso de que quieras mostrar la información almacenada en la base de datos en la tabla deberás generar el código HTML con el mismo formato como lo genera la librería para que puedas posteriormente también manipularlo en el lado del cliente a través del DOM.

Leave a Reply

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