0

Colegas sere breve, tengo una tabla que se llena mediante un foreach con un array que se llena desde la BD, mediante jquery manejo el boton mas para que sume el valor de producto y me valla calculando el total, si preciona el meno le va restando el precio, es una tabla con mas de 1 registro pero por alguna razon solo considera la primera fila, la segunda en adelante no la considera mi codigo jquery es el siguiente:

       $('#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);
});

y mi tabla es la siguiente (lo puse en duro ya que no le vi sentido agrega el 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>

como puedo lograr que tome cada fila con su precio correspondiente?

de ante manos muchas gracias

3
  • El problema de tu código es que le estas colocando el mismo identificador a los elementos de cada fila y un identificador debe ser único. Al existir más de un identificador igual, siempre va a tomar el primero que encuentre. Te recomiendo apuntar el evento click a una clase, las clases si pueden ser utilizadas múltiples veces y el identificador que contenga el número de fila a la que corresponde. Commented el 20 ene. 2018 a las 23:08
  • Estimado gracias por la respuesta pero al hacerlo por clase me considera toda las columna es decir si agrego en la segunda fila con el boton afecta a todas las demas filas, saludos Commented el 22 ene. 2018 a las 2:56
  • Claro, por eso con el id sacas la fila. Seria algo asi: Se define el boton asi <input type="button" value="+" id="1" class="btn_mas">, se apunta el evento a la clase $('.btn_mas').click(function () { var fila = this.id }. De esta forma ya sabes a que fila se le dio click. Commented el 22 ene. 2018 a las 13:35

1 respuesta 1

0

Estimados esta fue la manera en que lo soluciones, deja la respuesta por si alguien mas le sirve la respuesta

las funciones en 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);
});

y la tabla en 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>

para que explicar un poco lo que hago es tomar el valor dentro de la fila y busco el input con el id del elemento (la función find()) y obtengo el valor, asi con todas las variables para la funcion de sumar y restar, espero les sirva saludos

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.