0

Sucede que estoy añadiendo una fila con los datos de un producto a mi tabla para factura en javascript:

introducir la descripción de la imagen aquí

Esta fila que aparece en la imagen ha sido añadida mediante un template string luego de haberla seleccionado de una ventana modal:

 checkProd.forEach(check=> {
            check.addEventListener('click',()=>{
                let row=check.parentElement.parentElement.childNodes;
                let fila=document.createElement('tr');
                fila.innerHTML=
                `
                    <td><input type='number' class='count' min='1'        max=`+parseInt(row[4].innerHTML)+` value="1"></td>
                    <td class='id'>`+row[2].innerHTML+`</td>
                    <td class='stock'>`+row[4].innerHTML+`</td>
                    <td class='name'>`+row[6].innerHTML+`</td>
                    <td class='tax'>`+row[10].innerHTML+`</td>
                    <td class='price'>`+row[8].innerHTML+`</td>
                    <td class='price'>`+2+`</td>
                `;
                
                fila.appendChild(total);
                table_items.appendChild(fila);
                
                modalProd.classList.remove('showProducts');
                modalProd.classList.add('hideProducts');
            })
        });

La cuestión ahora es que quiero manipular el td del total para irla modificando en cuanto la cantidad del producto aumente o disminuya. Quiero que sea dinámico. ¿Alguna ayuda?

He tratado con este trozo de código:

 if (document.querySelector('.count')) {
        var total=document.querySelector('.total');            
        var count=document.querySelector('.count');
        var price=document.querySelector('.price');

        count.addEventListener('change',function(e){
            console.log(e.target.value);

        })     
    }

1 respuesta 1

0

Para poder cambiar el total por fila debes ponerle un id a cada elemento de tu fila, puede ser un contador al momento de agregar la fila o al construir la tabla,asi puedes tomar la columna de cantidad y multiplicar con la cantidad para poder escribir el resultado en el total, ya que todos comparten el mismo id.

La función agregar no es necesaria, pero es un ejemplo de como puedes construir la fila.

var cont = 2;

function actualizar(id) {
  let cantidad = document.getElementById(id).value;
  let valor = document.getElementById("val" + id).innerHTML;
  document.getElementById("tol" + id).innerHTML = cantidad * valor;
}

function agregar() {
  let fila = document.createElement('tr');
  fila.innerHTML = '<td><input type="text" id="' + cont + '" onchange="actualizar(' + cont + ');"></td><td id="val' + cont + '">80</td><td id="tol' + cont + '"></td>';
  document.getElementById('registros').appendChild(fila);
  cont += 1;

}
<table>
  <thead>
    <tr>
      <th>Cantidad</th>
      <th>Valor Unidad</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="registros">
    <tr>
      <td><input type="text" id="1" onchange="actualizar(1);"></td>
      <td id="val1">50</td>
      <td id="tol1"></td>
    </tr>
  </tbody>
</table>
<button onclick="agregar()">agregar fila</button>

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.