0

Actualmente estoy diseñando un formulario para calcular precio y costo de un determinado producto.

El código que estoy usando para esto es el siguiente:

en la página de visualización:

El script usado para enviarle la información del calculo es:

<script>
$(document).ready(function(){

    function actualizarTabla() {
        var cantidades = [];
        var precios = [];
        var preciosTotal = [];

        var total = 0;
        $(".table tbody > tr").each(function(index) {
            var cantidad = Number($(this).find('.cantidad').val());
            cantidades.push(cantidad);

            var precio = Number($(this).find('.precio').val());
            precios.push(precio);

            var total_unitario = cantidad * precio;
            preciosTotal.push(total_unitario);
            $(this).find('.precioTotal').text(total_unitario+' Pesos');
            total += total_unitario;
        });
        $("h2").text('Subtotal: '+total+' Pesos');
        $("h1").text('Total: '+total*1.16+' Pesos');
    }

    actualizarTabla();

    $(".table").on('change', function() {
        actualizarTabla();
    });

});
</script>



Muchas gracias amigo anexo el código que estoy utilizando para realizar la acción que comento aquí el HTML:

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope=>Product code</th>
                                <th scope="col">Name</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Unit price</th>
                                <th scope="col">Total price</th>
                            </tr>
                        </thead>
                        <tbody>
                                                                <tr>
                                    <th scope="row">2</th>
                                    <td>Football ball</td>
                                    <td><input type="number" class="form-control cantidad" value="1"></td>
                                    <td><input type="number" class="form-control precio" value="4" readonly></td>
                                    <td class="precioTotal"></td>
                                </tr>
                                                                <tr>
                                    <th scope="row">3</th>
                                    <td>Football shirt</td>
                                    <td><input type="number" class="form-control cantidad" value="1"></td>
                                    <td><input type="number" class="form-control precio" value="5" readonly></td>
                                    <td class="precioTotal"></td>
                                </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h2> </h2> 
                    <h1> </h1> 
                </div>
            </div>

        </div>

El apoyo que necesito es para mejorar el cómo mostrar la información sin los H1..6 ya que esto no ayuda con el formato del texto.

De antemano gracias.

Saludos

3
  • Añade el html, para así poder ayudarte mejor y saber donde queda cada heading Commented el 27 dic. 2019 a las 5:50
  • Listo Amigo, he agregado el html, muchas gracias. Commented el 27 dic. 2019 a las 6:56
  • Si la respuesta ha solucionado tu problema, te sugiero aceptarla con el check que hay bajo los votos. Haz el recorrido para que comprendas de lo que hablo.
    – DjCrazy
    Commented el 27 dic. 2019 a las 12:35

1 respuesta 1

1

Lo que puedes hacer es muy sencillo, puedes reemplazar las etiquetas h1, h2, ... por etiquetas span pero con una clase que haga referencia a dicho valor

Esto seria tu javascript


<script>
$(document).ready(function(){

    function actualizarTabla() {
        var cantidades = [];
        var precios = [];
        var preciosTotal = [];

        var total = 0;
        $(".table tbody > tr").each(function(index) {
            var cantidad = Number($(this).find('.cantidad').val());
            cantidades.push(cantidad);

            var precio = Number($(this).find('.precio').val());
            precios.push(precio);

            var total_unitario = cantidad * precio;
            preciosTotal.push(total_unitario);
            $(this).find('.precioTotal').text(total_unitario+' Pesos');
            total += total_unitario;
        });
        $(".subtotal").text('Subtotal: '+total+' Pesos');
        $(".total").text('Total: '+total*1.16+' Pesos');
    }

    actualizarTabla();

    $(".table").on('change', function() {
        actualizarTabla();
    });

});
</script>

Y este tu html


        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope=>Product code</th>
                                <th scope="col">Name</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Unit price</th>
                                <th scope="col">Total price</th>
                            </tr>
                        </thead>
                        <tbody>
                                                                <tr>
                                    <th scope="row">2</th>
                                    <td>Football ball</td>
                                    <td><input type="number" class="form-control cantidad" value="1"></td>
                                    <td><input type="number" class="form-control precio" value="4" readonly></td>
                                    <td class="precioTotal"></td>
                                </tr>
                                                                <tr>
                                    <th scope="row">3</th>
                                    <td>Football shirt</td>
                                    <td><input type="number" class="form-control cantidad" value="1"></td>
                                    <td><input type="number" class="form-control precio" value="5" readonly></td>
                                    <td class="precioTotal"></td>
                                </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <span class="subtotal"></span> 
                    <span class="total"></span> 
                </div>
            </div>

        </div>

Editado

Y aquí te dejo un poco de CSS

.subtotal, .total {
  font-weight: bold;
}
.total {
  font-size: 24px;
}
1

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.