0

Buenas tardes a toda la comunidad, estoy mostrando los datos de un formulario a una tabla al presionar un botón(btnAgregarTabla), los datos se muestran correctamente en la tabla pero adicionalmente necesito calcular el total a pagar de todos los registros de esa tabla y visualizarlos en un input, y ahí está mi problema, no he podido calcular el total a pagar, intenté con un foreach y solo se crea un bucle infinito, espero alguien pueda ayudarme, gracias. Comparto el código de mi javascript y html.

// esta funcion me permite agregar los valores del
    // formulario a la lista
    function AgregarLista() {
        var item = 0;
        $('#btnAgregarTabla').click(function () {
            item++;
            cliente = $('#id_cliente').val();
            codigo = $('#id_producto').select2('val');
            descripcion = $('#nombre_producto').val();
            precio = $('#precio').val();
            cantidad = $('#cantidad').val();
            subtotal = precio * cantidad;

            var fila = '<tr><td>' + item + '</td><td>' + cliente + '</td><td>' + codigo + '</td><td>' + descripcion + '</td><td>' + precio + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
            var btn = document.createElement('tr');
            btn.innerHTML = fila;
            document.getElementById('dtVenta').appendChild(btn);
        });
    }

    // ESTE ES EL CODIGO DEL FORMULARIO Y LA TABLA
    <div class="card-body">
        <h5>Datos del cliente:</h5>
        <div class="form-group d-flex">
            <div class="col-md-6 d-flex">
                <input type="text" name="dni" id="dni" class="form-control" placeholder="dni cliente">
                <input type="button" id="btnBuscarCliente" value="Buscar" class="btn btn-outline-danger">
            </div>
            <div class="col-md-6">
                <input type="hidden" name="id_cliente" id="id_cliente" value="">
                <input type="text" name="nombre_cliente" id="nombre_cliente" value="" class="form-control" placeholder="Cliente" disabled>
            </div>
        </div>
        <h5>Datos del producto:</h5>
        <div class="form-group d-flex">
            <div class="col-md-6 d-flex">
                <!-- <input type="text" name="id_producto" id="id_producto" class="form-control" placeholder="codigo producto"> -->
                <select name="id_producto" id="id_producto" class="id_producto js-states form-control"></select>
                <input type="button" id="btnBuscarProducto" value="Buscar" class="btn btn-outline-danger">
            </div>
            <div class="col-md-6">
                <input type="text" name="nombre_producto" id="nombre_producto" class="form-control" placeholder="Producto" disabled>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-md-4">
                <input type="text" name="precio" id="precio" class="form-control" placeholder="s/.0.00" disabled>
            </div>
            <div class="col-md-4">
                <input type="number" name="stock" id="stock" class="form-control" placeholder="stock" disabled>
            </div>
            <div class="col-md-4">
                <input type="number" name="cantidad" id="cantidad" value="1" class="form-control" placeholder="cantidad">
            </div>
        </div>
    </div>


    <div class="card">
        <div class="card-body">
            <table id="dtVenta" class="table mt-4" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Nro.Venta</th>
                        <th>Cliente</th>
                        <th>Codigo</th>
                        <th>Descripcion</th>
                        <th>Precio</th>
                        <th>Cantidad</th>
                        <th>SubTotal</th>
                        <th>Acciones</th>
                    <tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="card-footer">
            <div class="row">
                <input type="button" id="btnCancelarVenta" value="Cancelar" class="btn btn-danger">
                <input type="button" id="btnGenerarVenta" value="Generar" class="btn btn-success mx-1">
                <div class="d-flex ml-auto">
                    <label for="" class="mx-2 mt-1">Total:</label>
                    <input type="text" name="total_pagar" id="total_pagar" class="form-control">
                </div>

            </div>

        </div>
    </div>

2 respuestas 2

0

y si mejor declaras una variable en la cual almacenar al momento de agregar ya los vas sumando

var item = 0;
var total = 0;
function AgregarLista() {        
    item++;
    cliente = $('#id_cliente').val();
    codigo = $('#id_producto').val();
    descripcion = $('#nombre_producto').val();
    precio = $('#precio').val();
    total = eval(total)+eval(precio);
    cantidad = $('#cantidad').val();
    subtotal = precio * cantidad;

    var fila = '<tr><td>' + item + '</td><td>' + cliente + '</td><td>' + codigo + '</td><td>' + descripcion + '</td><td>' + precio + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
    var btn = document.createElement('tr');
    btn.innerHTML = fila;
    document.getElementById('dtVenta').appendChild(btn);
    $("#total_pagar").val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">

        <h5>Datos del cliente:</h5>
        <div class="form-group d-flex">
            <div class="col-md-6 d-flex">
                <input type="text" name="dni" id="dni" class="form-control" placeholder="dni cliente">
            </div>
            <div class="col-md-6">
                <input type="hidden" name="id_cliente" id="id_cliente" value="1">                
            </div>
        </div>
        <h5>Datos del producto:</h5>
        <div class="form-group d-flex">
            <div class="col-md-6 d-flex">
                <!-- <input type="text" name="id_producto" id="id_producto" class="form-control" placeholder="codigo producto"> -->
                <select name="id_producto" id="id_producto" class="id_producto js-states form-control">
                <option value="1">Opcion 1</option>
                </select>
                <input onclick="AgregarLista()" type="button" id="btnBuscarProducto" value="Agregar" class="btn btn-outline-danger">
            </div>
            <div class="col-md-6">
                <input type="text" name="nombre_producto" id="nombre_producto" class="form-control" placeholder="Producto">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-md-4">
                <input type="text" name="precio" id="precio" class="form-control" placeholder="s/.0.00">
            </div>
            <div class="col-md-4">
                <input type="number" name="stock" id="stock" class="form-control" placeholder="stock">
            </div>
            <div class="col-md-4">
                <input type="number" name="cantidad" id="cantidad" value="1" class="form-control" placeholder="cantidad">
            </div>
        </div>
    </div>


    <div class="card">
        <div class="card-body">
            <table id="dtVenta" class="table mt-4" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Nro.Venta</th>
                        <th>Cliente</th>
                        <th>Codigo</th>
                        <th>Descripcion</th>
                        <th>Precio</th>
                        <th>Cantidad</th>
                        <th>SubTotal</th>
                        <th>Acciones</th>
                    <tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="card-footer">
            <div class="row">
                <input type="button" id="btnCancelarVenta" value="Cancelar" class="btn btn-danger">
                <input type="button" id="btnGenerarVenta" value="Generar" class="btn btn-success mx-1">
                <div class="d-flex ml-auto">
                    <label for="" class="mx-2 mt-1">Total:</label>
                    <input type="text" name="total_pagar" id="total_pagar" class="form-control">
                </div>

            </div>

        </div>
    </div>

1
  • me funcionó correctamente con tu ejemplo, gracias Commented el 23 nov. 2019 a las 2:19
0

Hice un ejemplo sencillo de lo que puedes utilizar, Primero creamos dos arreglos estos serán tus valores que insertas a la tabla, a cada td le agregue la clase precio para poder seleccionar con JS o jQuery el texto que sería el precio dentro de esos td, seleccionamos la clase con document.getElementsByClassName('precio') esto te devuelve un HTMLCollection de la etiqueta a la cual accedes por su atributo class o de la misma etiqueta, entonces hay que recorrerlo con un for, ya que lo recorremos guardo los valores en otro arreglo (hice esto porque intentando sumarlo dentro del for me sumaba sólo el ultimo valor que es 40+40 la verdad no sé por qué), despues podemos usar el método reduce que como su nombre lo indica reduce un arreglo a lo que le indiques, en este caso la suma de sus valores te da un solo resultado, espero me haya explicado, cualquier duda hazla saber.

$(document).ready(function(){

const precio = [20,10,15,40];
const producto = ['plato','escoba','shampoo','cepillo'];

let tabla = document.getElementById('body');

let contenido = '<tr>';
                 
for(let i = 0; i < precio.length; i++){
  
    contenido += `<tr><td>${producto[i]}</td>
    <td class="precio">${precio[i]}</td></tr>
                        `;
  
}

contenido += '</tr>';

tabla.innerHTML = contenido;


document.querySelector('#btn').addEventListener('click', calcular);


})



function calcular(){
 
 var tPrecio = document.getElementsByClassName('precio');
 

   let numeros = new Array();
    for(let x = 0 ; x < tPrecio.length; x++){
       numero = parseInt(tPrecio[x].innerText);
       numeros.push(numero);

    }

let suma = numeros.reduce((p,c)=>{

return p+c;
})
 console.log(suma);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="tabla">
<thead>
<th>Producto</th>
<th>Precio</th>
</thead>
<tbody id="body">

</tbody>
</table>


<button id="btn">Calcular total</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.