2

Necesito mostrar el total (.total) de cada fila (.numero).

Obviamente mi problema es el loop que lo estoy realizando mal.

Ahora mismo tengo el siguiente código:

<table id="tabla" border="1">
  <thead>
    <tr>
      <td>Numero</td>
      <td>total</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="numero">1</td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="numero">2</td>
      <td class="total"></td>
    </tr>    
  </tbody>
</table>

  $(document).ready(function() 
  {    
    $(document).on('focusout','#factor',function()
    {
      $("#tabla").each(function()
      {
        var factor = $("#factor").val();
        var numero = $("#tabla tbody tr").siblings().text();         
                  var r = parseInt(factor) + parseInt(numero);
                  $(".total").text(r);
                  console.log(r); 
      })    
    })
  });

1 respuesta 1

5

Las modificaciones que necesitas hacer son las siguientes:

  • [Opcional] Para dar una mejor experiencia al usuario, te recomiendo utiliza el evento input en lugar de fousout.

  • Debes usar parseInt para obtener el valor como un entero (o parseFloat para obtener el valor como un decimal)

  • Los elementos que debes buscar e iterar, son las filas de la tabla (eg: $("#tabla tbody tr").each)

  • Por cada fila (eg: $tr = $(this)) debes buscar las celdas con las clases .numero y .total (eg: $tr.find('.numero'))

Ejemplo:

$(function() {
  $('#factor').on('input', function() {
    var factor = parseInt($("#factor").val(), 10) || 0;
    
    $("#tabla tbody tr").each(function() {
      var $tr = $(this);
      var numero = parseInt($tr.find('.numero').text(), 10);
      var r = factor + numero;
      
      $tr.find('.total').text(r);
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="tabla" border="1">
  <thead>
    <tr>
      <td>Numero</td>
      <td>total</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="numero">1</td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="numero">2</td>
      <td class="total"></td>
    </tr>
  </tbody>
</table>

Sumar: <input id="factor" type="number" value="0"/>

4
  • excelente, gracias por la edicion y respuesta @marcos Commented el 9 ene. 2018 a las 12:52
  • tengo una duda de como funciona tu codigo, quisiera que me dijeras que funcion cumple el 10) || 0 . No lo tengo claro ahora mismo Commented el 9 ene. 2018 a las 12:55
  • El método parseInt necesita que se establezca la base sobre la cual se calcula el numero, en este caso, es 10. Si llegara a suceder que parseInt(valor, 10) devolviera NaN el calculo fallaria, por lo que adicione || 0, esto quiere decir que si parseInt devuelve NaN entonces el valor sera igual a cero.
    – Marcos
    Commented el 9 ene. 2018 a las 12:58
  • ahora si, gracias Commented el 9 ene. 2018 a las 12:59

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.