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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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