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.

 

 

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en programacion y etiquetada , , , , . Guarda el enlace permanente.

9 respuestas a Ajax basico (administrar una tabla HTML)

  1. wajemiguel dijo:

    estimado puedes poner el codigo completo !!! por q practicamente si estas dando un tutorial kasi no se entiende mucho !!! hay partes q si !! pero hay lines de prograammacion q invocas variables q uno no sabe q son o kmo y en q parte las utlizas .. No lo tomes a mal pero solo mejora en eso …

    Me gusta

  2. Anónimo dijo:

    estas lineas me tienen confundido

    var c=document.getElementById(“pre”);

    var capa=document.getElementById(“capa4″);
    capa.innerHTML=””;
    c.value=””;
    c.focus();
    }

    }

    Me gusta

    • sistemasumma dijo:

      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

  3. Anónimo dijo:

    esta parte
    var c=document.getElementById(“pre”);
    y estas otras lineas

    var capa=document.getElementById(“pago”);
    capa.innerHTML=””;
    c.value=””;
    c.focus();
    }

    }

    Me gusta

  4. Anónimo dijo:

    ing. que funcion cumple la variable pre que se declara al comienzo de la funcion grabar gracias

    Me gusta

  5. Anónimo dijo:

    buenas noches ing. quisiera saber la variable gtotal de donde sale gracias, por favor montar el codigo completo de nuevo gracias…

    Me gusta

    • sistemasumma dijo:

      La variable gtotal la uso para modificar la suma total de la venta, la suma esta almacenada en un cuadro de texto, que tu colocas en tu formulario y a este cuadro de texto le sumaras lo que ventas cada que des click en el boton + y en el codigo publicado esta considerado que se le restara la cantidadnde dinero del articulo que fue eliminado de la lista

      Me gusta

  6. Anónimo dijo:

    ing. buenas noches podria subir el codigo completo andando con esta nueva funcion, le agradeceria ya que queda uno perdido gracias

    Me gusta

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s