Skip to main content
1 de 2

Limpiar tabla HTML por cada registro

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');
        $("#tblVenta > tbody").empty();
        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>