Skip to main content

¿Cómo puedo mejorar el modo de visualizar la información usando ajax?

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