Ajax basico (administrar una tabla HTML)


Como complemento a la serie de post «Acceso a múltiples tablas» surgió este post en el que mostraremos que hacer en caso de que el cliente no desee llevar alguno de los artículos que ya están cargados en la lista, bien, esta acción aunque parece sencilla lleva dos puntos a cuidar:

  1. Que se pueda eliminar cualquier renglón de la tabla y no solo el ultimo
  2. Que la cantidad del renglón eliminado se descuente del total a pagar por el cliente.

 

Para que esto funcione lo que haremos sera modificar la función que se encarga de agregar los productos a la tabla:

 

Como podemos ver en la linea marcada con la fecha roja guardamos en una variable llamada «botón» una cadena que es el código html que crea un botón que al darle click llamara a la función «quitar()» , pasando como parámetro el numero de linea donde se encuentra y que determinamos a traves de la variable «l» .

Para insertarla en la tabla vemos que en la linea marcada con la flecha azul usamos la propiedad innerHTML de la celda donde lo colocaremos y la igualamos a la variable botón.

Ahora vayamos con la función quitar, que podemos ver en la siguiente imagen

Como podemos observar, la función recibe el número de linea como parámetro a través de la variable p; después de eso usamos la variable t para asociarla con la tabla y a través de ella tenemos acceso a la celda 4 de la linea, que es la que tiene el valor del producto en cuestión, dicho valor lo depositamos en la variable «valor».

Ahora lo descontamos del «input» que almacena la suma de la venta, la eliminación de la fila la hacemos a través de «t.deleteRow(p)», donde recordemos «p» es el numero de fila a eliminar y que insertamos en cada botón «-» de la tabla.

El siguiente problema es que al eliminar una fila, los numero de fila asociados a cada botón se deben cambiar, para ello vemos que tomamos en la variable «l» el numero total de final y hacemos un ciclo que va desde la fila 1 hasta la fila «l» y lo que hace, es cambiar el botón «-» de cada fila para que tenga el numero correcto en su llamada a la función, de esta forma nos aseguramos que cada vez que llamamos a la función quitar se llama con el numero de fila correcto para su eliminación.

Ahora bien, para mayor seguridad estos códigos mostrados deberían ir precedidos de la petición de la clave del administrador para su autorización.

 

 

 

9 Comentarios

    1. si te fijas es mas o menos igual al otro codigo por que preguntas, «pre» no es una variable, es el id de un objeto del formulario, lo que hace el codigo es borrar el contenido de una capa, cada vez que quieres borrar el contenido de una capa usas la propiedad innerHTML, que almacena el codigo HTML almacenado en el objeto y al igualarlo a «» lo dejo en blanco, lo otro que hago es que con c.value borro el contenido del objeto «pre» y uso el metodo focus para que el cursor del teclado quede asignado a el para poder volver a ingresar mas datos

      Me gusta

Replica a Anónimo Cancelar la respuesta

Este sitio utiliza Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.