increase and decrease sum of the total with jquery for a price table

Question

increase and decrease sum of the total with jquery for a price table

Navigation

#1 by (0 votes)

0

Colleagues will be brief, I have a table that is filled by a foreach with an array that is filled from the database, by jquery I use the button more to add the product value and fence me calculating the total, if I press the menu it is subtracting the price, it is a table with more than 1 record but for some reason only considers the first row, the second on does not consider my code jquery is as follows:

       $('#mas').click(function () {

    var cantidad = $('#cantidad').val();

    var suma = parseInt(cantidad) + 1;
    var precios = $('#precios').val();
    var total = parseInt(precios) * suma;
    // alert(total);
    $('#cantidad').val(suma);
    $('#total').val(total);
    console.log(precios);
});
$('#menos').click(function () {

    var cantidad = $('#cantidad').val();
    var precios = $('#precios').val();
    var suma = parseInt(cantidad) - 1;
    var total = $('#total').val();
    var total2 = total - precios;
    if (suma >= 0) {

        $('#cantidad').val(suma);
        $('#total').val(total2);
    }
    console.log(precios);
});

and my table is the following (I put it hard since I did not see any sense add the foreach):

 <table id="TablaCilindro" class="table table-responsive table-bordered">
                            <thead>
                                <tr>
                                    <th>Agregar</th>
                                    <th>Cilindro</th>
                                    <th>Restar</th>
                                    <th>Cantidad</th>
                                    <th>Precio</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>

                                    <tr>
                                        <td><input type="button" value="+" id="mas1"></td>
                                        <td>producto 1</td>
                                        <td><input type="button" value="-" id="menos"></td>
                                        <td><input type="text" id="cantidad" value="0" class="btn btn-sm col-sm-6"></td>
                                        <td><input type="tex" id="precios" value="20500" class="btn btn-sm col-sm-12"></td>
                                        <td><input type="text" id="total" value="0" class="btn btn-sm col-12"></td>
                                    </tr>

                                    <tr>
                                        <td><input type="button" value="+" id="mas"></td>
                                        <td>producto 2</td>
                                        <td><input type="button" value="-" id="menos"></td>
                                        <td><input type="text" id="cantidad" value="0" class="btn btn-sm col-sm-6"></td>
                                        <td><input type="tex" id="precios" value="20000" class="btn btn-sm col-sm-12"></td>
                                        <td><input type="text" id="total" value="0" class="btn btn-sm col-12"></td>
                                    </tr>


                            </tbody>
                        </table>

How can I get it to take each row with its corresponding price?

beforehand thank you very much

jquery html html-tabla

asked by Pablo Moraga 21.01.2018 в 00:00

source

1 answer

How to avoid an error "invalid need: expected Call, have Poll" in Bot Framework c # Timeout error

score 0 · Accepted Answer

Dear this was the way in which the solutions, leave the answer in case someone else serves the answer

the functions in jquery:

$('.mas').click(function () {

    var cantidad = $(this).parents("tr").find('#cantidad').val();
    var suma = parseInt(cantidad) + 1;
    var precios = $(this).parents("tr").find('#precios').val();
    var total = parseInt(precios) * suma;
    var totalfinal = $('#totalfinal').val();

    var totalcalculado = parseInt(precios)+ parseInt(totalfinal);
    // alert(total);
    $(this).parents("tr").find('#cantidad').val(suma);
    $(this).parents("tr").find('#total').val(total);
    $('#totalfinal').val(totalcalculado);



});
$('.menos').click(function () {

    var cantidad = $(this).parents("tr").find('#cantidad').val();
    var precios = $(this).parents("tr").find('#precios').val();
    var suma = parseInt(cantidad) - 1;
    var total = $(this).parents("tr").find('#total').val();
    var total2 = total - precios;
    var totalfinal = $('#totalfinal').val();
    var totalcalculado = parseInt(totalfinal) - precios;

    if (suma >= 0) {

        $(this).parents("tr").find('#cantidad').val(suma);
        $(this).parents("tr").find('#total').val(total2);
        $('#totalfinal').val(totalcalculado);

    }
    console.log(precios);
});

and the table in html:

<table id="TablaCilindro" class="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th>Agregar</th>
                                <th>Cilindro</th>
                                <th>Restar</th>
                                <th>Cantidad</th>
                                <th>Precio</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>

                                <tr>
                                    <td><input type="button" value="+" id="mas1"></td>
                                    <td>producto 1</td>
                                    <td><input type="button" value="-" id="menos"></td>
                                    <td><input type="text" id="cantidad" value="0" class="btn btn-sm col-sm-6"></td>
                                    <td><input type="tex" id="precios" value="20500" class="btn btn-sm col-sm-12"></td>
                                    <td><input type="text" id="total" value="0" class="btn btn-sm col-12"></td>
                                </tr>

                                <tr>
                                    <td><input type="button" value="+" id="mas"></td>
                                    <td>producto 2</td>
                                    <td><input type="button" value="-" id="menos"></td>
                                    <td><input type="text" id="cantidad" value="0" class="btn btn-sm col-sm-6"></td>
                                    <td><input type="tex" id="precios" value="20000" class="btn btn-sm col-sm-12"></td>
                                    <td><input type="text" id="total" value="0" class="btn btn-sm col-12"></td>
                                </tr>
  <tr>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                      <td>Total Final</td>
                                      <td class=""><input type="text" class="btn 
                  btn-sm col-sm-12" id="totalfinal" value="0"></td>
                                  </tr>


                        </tbody>
                    </table>

To explain a bit what I do is take the value inside the row and look for the input with the id of the element (the function find ()) and I get the value, so with all the variables for the function of adding and subtract, I hope you greet them.