0

tengo una tabla que se alimenta mediante Json de una base de datos y obtengo los datos de forma correcta, el problema que tengo es que cuando ingreso un nuevo articulo los muestra en una tabla pero si vuelvo a presionar el botón para ingresar un nuevo articulo me muestra nuevamente los datos pero junto con los anteriormente recuperados, es decir, muestro dos veces los mismos datos en la tabla y si presiono una tercera vez muestro tres veces los datos.

este es mi codigo json

function fntAddProductoI(){
let idProducto = document.querySelector('#listProducto').value;
let intPrecioI = document.querySelector('#celPrecios').innerHTML;
let intCantidadi = document.querySelector('#txtCantidadI').value;
//divLoading.style.display = "flex";
let request = (window.XMLHttpRequest) ? 
                    new XMLHttpRequest() : 
                    new ActiveXObject('Microsoft.XMLHTTP');
let ajaxUrl = base_url+'/Invoices/setProductoI';
let formData = new FormData();
formData.append('productoid',idProducto)
formData.append('precio',intPrecioI)
formData.append('cantidad',intCantidadi)
request.open("POST",ajaxUrl,true);
request.send(formData);
request.onreadystatechange = function(){
    if(request.readyState != 4) return;
    if(request.status == 200){
        let objData = JSON.parse(request.responseText);
        const tabla = document.querySelector('#detalleInvoice');
        Object.values(objData.data).forEach(element => {
         tabla.innerHTML += `
            <tr>
                <td colspan="2">${element.nombre}</td>
                <td class="textcenter">${element.cantidad}</td>
                <td class="textright">${element.precio}</td>
                <td class="textright">${element.preciototal}</td>
                <td class="textcenter">
                <a href="#" class="link_delete textcenter" onclick="event.preventDefault(); delProducto(${element.productoid});"><i class="far fa-trash-alt"></i></a>
                </td>
            </tr>`
        })  
    }
 //divLoading.style.display = "none";
    return false;
}

} este en mi codigo html de la tabla

<table class="table table-striped tblVenta">
          <thead>
            <tr>
              <th>Producto</th>
              <th colspan="3">Descripción</th>
              <th>Cantidad</th>
              <th>Precio</th>
              <th>Precio Total</th>
              <th>Acciones</th>
            </tr>
            <tr>
              <th>
              <select class="form-control" data-live-search="true" id="listProducto" name="listProducto" onChange="fntaddProducto()"></select>
              </th>
              <th colspan="3" id="celDescripcions">-</th>
              <th><input type="number" name="txtCantidadI" id="txtCantidadI" value="0" min="1"></th>
              <th id="celPrecios">$ 0.00</th>
              <th id="celPrecioTotal">$ 0.00</th>
              <th id="addProductoI"></th>
             
            </tr>
            <tr>
              <th colspan="2">Producto</th>
              <th>Cantidad</th>
              <th class="textright">Precio</th>
              <th class="textright">Precio Total</th>
              <th class="textcenter">Acciones</th>
            </tr>
          </thead>
          <tbody id="detalleInvoice">
            
          </tbody>
          <tfoot>
              <tr>
                <td colspan="4" class="textright">TOTAL $</td>
                <td class="textright">100.00</td>
              </tr>
          </tfoot>
        </table>   

1 respuesta 1

0

tienes mal ingresado el codigo.

pero el problema siempre es append

pueba limpiar los datos antes de ingresar info en el objeto.

Por ejemplo:

tabla.innerHTML=""; //limpia el objeto
tabla.append('Nuevos datos');

//o simplemnetepuedes agregar directo a html

tabla.innerHTML="nueva data";

el metodo append() es para agregar uno después del otro, acumula y no borra.

3
  • si tiene razón ese codigo no iba, solo lo probe, ya lo corregí y ahora solo me muestra el primer registro los demás no Commented el 24 mar. 2022 a las 22:08
  • coloque el codigo de esta forma no se si es correcto: Object.values(objData.data).forEach(element => { tabla.innerHTML = ""; tabla.innerHTML += ` <tr>... Commented el 24 mar. 2022 a las 22:10
  • usa innerHTML antes de cualquier for y el append para dentro del for o forEach
    – John
    Commented el 26 mar. 2022 a las 18:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.