0

tengo una tabla hmtl

<table>
<tbody>
<tr>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad80.1" name="_cantidad80[]" value="0"></td>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad100.1" name="_cantidad100[]" value="0"></td>
</tr>
<tr>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad80.1" name="_cantidad80[]" value="0"></td>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad100.1" name="_cantidad100[]" value="0"></td>
</tr>
<tr>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad80.1" name="_cantidad80[]" value="0"></td>
<td><input class="form-control input-sm" type="text" onkeyup="calculo(this);" id="_cantidad100.1" name="_cantidad100[]" value="0"></td>
</tr>

</tbody>
</table>

lo que deseo es sumar los valores de los input de cada columna;

He logrado sumar columna pero para valores que no estan en input con esta funcion

    var sumasM=0;
  	$('#comprobanteDetalle tbody td:nth-child(5)').each(function (i){
     	sumasM += parseFloat($(this).text());  	
  			});
        
        var totalM = document.getElementById("__totalM");
        totalM.value =sumasM;

tambien estoy intentandolo asi

<script type="text/javascript">

	var importe_total = 0;
    $('.i80').keyup(function (){
    	alert("sdfs");
        $("#comprobanteDetalle tbody td input[1]").each(
            function(index, value) {
                importe_total = importe_total + eval($(this).val());
                console.log(importe_total);
            }
        );  
    });
    $("#trollo80").hmtl(importe_total);
    $("#trollo80").text(importe_total);
	</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 respuestas 2

2

puedes capturar el 'name' del input que deseas y buscar en la tabla a sus similares (hermanos) e ir acumulando.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
         <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad80[]">
      </td>
      <td>
        <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad100[]">
      </td>
    </tr>
    <tr>
      <td>
        <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad80[]">
      </td>
      <td>
        <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad100[]">
      </td>
    </tr>
    <tr>
      <td>
        <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad80[]">
        </td>
      <td>
        <input class="form-control input-sm" type="text" onkeyup="calculo(this);"name="_cantidad100[]">
      </td>
    </tr>
    
    <h2>
      La suma de la columna es: <span id="rpta"></span>
    <h2>
  </tbody>
</table>

<script type = "text/javascript">
  function calculo(e)
  {
    var acumulador = 0;
    var nombre_input = e.name;
    var hermanos = 'input[name="' + nombre_input + '"]';
    var input_hermanos = $('table').find(hermanos);
    $.each(input_hermanos, function(idx, x)
    {
      var num = parseInt($(x).val());
      if (!isNaN(num) && num != undefined) //Validamos si está vacío o no es un número para acumular
        acumulador += num;
    });

    $('#rpta').html(acumulador);
  }
</script>

0

A continuación te dejo un ejemplo dinámico, obteniendo el número de la columna a partir del atributo cellIndex del elemento td.

$('.calcular_columna').on('change', function (e) {
    const cellIndex = $(e.target).parents('td:first')[0].cellIndex;
    const queryInputs = 'td:nth-child(' + (cellIndex + 1) + ') input';

    const $tbody = $(e.target).parents('tbody:first');
    const $inputs = $tbody.find(queryInputs);

    let resultado = 0;

    $inputs.each(function(index, input) {
        resultado += parseInt(input.value);
    });

    $(e.target).parents('table:first').find('tfoot ' + queryInputs).val(resultado);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td><input type="number" class="calcular_columna" value="0"></td>
            <td><input type="number" class="calcular_columna" value="0"></td>
        </tr>
        <tr>
            <td><input type="number" class="calcular_columna" value="0"></td>
            <td><input type="number" class="calcular_columna" value="0"></td>
        </tr>
        <tr>
            <td><input type="number" class="calcular_columna" value="0"></td>
            <td><input type="number" class="calcular_columna" value="0"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><input type="number" value="0" disabled readonly></td>
            <td><input type="number" value="0" disabled readonly></td>
        </tr>
    </tfoot>
</table>

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.