2

tengo esta tabla donde agrego valores numéricos y quiero poder sumar la columna que tiene la clase gr y la clase cost y que los valores sumados de cada columna aparezcan en textbox separados, las filas son incrementables, aquí dejo el código:

<div class="container">
    <input type="button" value="Add" onClick="addRow('dataTable')"/>
    <form name="add_name" id="add_service">
        <table id="dataTable" class="form" border="1">
            <tbody>
            <tr id='row_0'>

                <td>
                    <label>Service</label>
                    <input type="text" required="required" name="service[]">
                </td>
                <td>
                    <label>Quantity</label>
                    <input type="text" class="qty" required="required" name="qty[]" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="price">Price</label>
                    <input type="text" class="cost" required="required" name="cost[]" oninput="calculate('row_0')">
                </td>
				 <td>
                    <label for="gr">gr</label>
                    <input type="text" class="gr" required="required" name="gr[]" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="total">Total</label>
                    <input type="text" class="subtotal" required="required" name="subtotal[]">

                </td>
                <td>
                    <input type="button" class="remove" value="Remove" onclick="removeRow('dataTable', '0');">
                </td>
            </tr>
            </tbody>
        </table>
        <div>
			<input type="text" class="" id="total_gr">
			<input type="text" class="" id="total_cost">
            <input type="text" class="" id="grand_total">
        </div>
        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit"/>
    </form>
</div>
Me gustaría que sumara de forma automática.

1 respuesta 1

3

Te dejo comentado en el código, espero te funcione, cualquier duda hazla saber.

function sumargr() {

  var total = 0; //inicimos una variable para concatenarle la suma de los inputs

  $(".gr").each(function() { //recorremos el arreglo 

    if (isNaN(parseFloat($(this).val()))) { //con la propiedad this obtenemos el valor del input donde estemos escribiendo y validamos que no sea un número
    //si no lo es agregamos un 0

      total += 0;

    } else {
//si lo es sumamos ese mismo valor
      total += parseFloat($(this).val());

    }

  });

  //agregaos el valor al input que corresponde
  document.getElementById('total_gr').value = total;

}



function sumarcost() {

  var total = 0;

  $(".cost").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

      total += parseFloat($(this).val());

    }

  });

  document.getElementById('total_cost').value = total;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <input type="button" value="Add" onClick="addRow('dataTable')"/>
    <form name="add_name" id="add_service">
        <table id="dataTable" class="form" border="1">
            <tbody>
            <tr id='row_0'>

                <td>
                    <label>Service</label>
                    <input type="text" required="required" name="service[]">
                </td>
                <td>
                    <label>Quantity</label>
                    <input type="text" class="qty" required="required" name="qty[]" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="price">Price</label>
                    <input type="text" class="cost" required="required" name="cost[]" oninput="calculate('row_0')" onkeyup="sumarcost()">
                </td>
				 <td>
                    <label for="gr">gr</label>
                    <input type="text" class="gr" required="required" value="" name="gr[]" oninput="calculate('row_0')" onkeyup="sumargr()">
                </td>
                <td>
                    <label for="total">Total</label>
                    <input type="text" class="subtotal" required="required" name="subtotal[]">

                </td>
                <td>
                    <input type="button" class="remove" value="Remove" onclick="removeRow('dataTable', '0');">
                </td>
            </tr>
            
            
            
             <tr id='row_1'>

                <td>
                    <label>Service</label>
                    <input type="text" required="required" name="service[]">
                </td>
                <td>
                    <label>Quantity</label>
                    <input type="text" class="qty" required="required" name="qty[]" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="price">Price</label>
                    <input type="text" class="cost" required="required" name="cost[]" oninput="calculate('row_0')" onkeyup="sumarcost()">
                </td>
				 <td>
                    <label for="gr">gr</label>
                    <input type="text" class="gr" required="required" value="" name="gr[]" oninput="calculate('row_0')" onkeyup="sumargr()">
                </td>
                <td>
                    <label for="total">Total</label>
                    <input type="text" class="subtotal" required="required" name="subtotal[]">

                </td>
                <td>
                    <input type="button" class="remove" value="Remove" onclick="removeRow('dataTable', '0');">
                </td>
            </tr>
            
            
            </tbody>
        </table>
        <div>
			<input type="text" class="" id="total_gr">
			<input type="text" class="" id="total_cost">
            <input type="text" class="" id="grand_total">
        </div>
        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit"/>
    </form>
</div>

5
  • 1
    Gracias vick funcionó a la perfección, donde aprendiste javascript? el 18 dic. 2019 a las 19:32
  • 1
    Un gusto poder ayudarte, aprendí en mi trabajo, no sabía nada, me regañaron XD y me puse a practicar, compre un curso en udemy y seguía practicando, aún me falta demasiado y también puedes buscar soluciones en google, de hecho este código lo encontré en una pregunta del 2017, lo intenté hacer de otra forma pero había un error, así que mejor modifiqué la respuesta a lo que requerías y listo, cuando veas un "meme" de qué es ser programador y dicen que es buscar en google, tiene algo de cierto! XDDD el 18 dic. 2019 a las 19:36
  • 1
    Hola @Vick Muñoz puedes ayudarme con esto? es.stackoverflow.com/questions/317571/… el 20 dic. 2019 a las 18:33
  • Ya publiqué mi respuesta, verificarla. :) el 20 dic. 2019 a las 19:13
  • ayudame con esta es.stackoverflow.com/questions/328137/… el 10 feb. 2020 a las 14:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.