2

Estoy intentando sumar la columna peso y mostrarlo en mi <span id="ptotal"> el problema es que siempre me retorna cero.

introducir la descripción de la imagen aquí

$(document).on('keyup','#datatable-buttons input.peso',function(){
                peso = $(this).val();

                sumar();
        });

    function sumar(){
            pesostotal = 0;
            $("#datatable-buttons tr").each(function(){
                pesostotal = pesostotal + $(this).find('td:eq(2)').text();
                alert(pesostotal); // lo puse por debugger Muestra 0 siempre!
            });
            $('#ptotal').text(pesostotal);
        }

html

<table id="datatable-buttons" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable-buttons_info" style="width: 100%;">
                          <thead>
                            <tr role="row">
                                <th class="sorting_asc" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">#</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 200px;" aria-label="Position: activate to sort column ascending">Calidad</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Office: activate to sort column ascending">Peso</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Age: activate to sort column ascending">Cajas</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Start date: activate to sort column ascending">Precio</th>
                          </thead>

                            <tbody>
                                <?php if(!empty($calidad)): ?>
                                    <?php foreach($calidad as $calidad): ?>

                                  <tr role="row" class="odd">
                                      <td tabindex="0" class="sorting_1"><input type="hidden"><?php echo $calidad->id; ?></td>
                                      <td><?php echo $calidad->nombre; ?></td>
                                      <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
                                      <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
                                      <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                    </table>
6
  • cual es el codigo html relevante?
    – Klaimmore
    el 12 abr. 2018 a las 19:49
  • probablemente el error es porque asi tenas un numero el lo lee como string vas a tener que parsearlo el 12 abr. 2018 a las 19:50
  • listo, lo he añadido
    – DoubleM
    el 12 abr. 2018 a las 19:50
  • cambia esa linea esto parseInt($(this).find('td:eq(2)').text()); el 12 abr. 2018 a las 19:53
  • 1
    Creo que el problema es la forma en la que obtienes el dato no debería ser find('td:eq(2)').text() sino find('td:eq(2)').val() el 12 abr. 2018 a las 19:57

2 respuestas 2

3

He cambiado tu código considerando en primer lugar el caso de como obtienes el value lo haces con text() y que lo deberias hacer con val() porque es un input. Por otro lado puedes utilizar el mismo selector para sumar tus inputs #datatable-buttons input.peso cosa que cambie y que por ultimo deberías validar si el valor que sumaras es o no un valor validado ya que sino lo haces se volverá un NaN tu variable pesostotal

$(document).on('change', '#datatable-buttons input.peso', function() {
  sumar();
});

function sumar() {
  var pesostotal = 0;
  $("#datatable-buttons input.peso").each(function() {
  
    var value = $(this).val();
    if (value == "" || isNaN(value))
      return
    pesostotal += parseFloat(value);
    //alert(pesostotal); // lo puse por debugger Muestra 0 siempre!
  });

  $('#ptotal').text(pesostotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable-buttons" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable-buttons_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">#</th>
      <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 200px;" aria-label="Position: activate to sort column ascending">Calidad</th>
      <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Office: activate to sort column ascending">Peso</th>
      <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Age: activate to sort column ascending">Cajas</th>
      <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Start date: activate to sort column ascending">Precio</th>
  </thead>

  <tbody>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1"><input type="hidden"></td>
      <td>
      </td>
      <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
      <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
      <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1"><input type="hidden"></td>
      <td>
      </td>
      <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
      <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
      <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
    </tr>
    <tr role="row" class="odd">
      <td tabindex="0" class="sorting_1"><input type="hidden"></td>
      <td>
      </td>
      <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
      <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
      <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
    </tr>
  </tbody>
</table>

<label id="ptotal"></label>

1
  • perfecto me diste una solución efectiva y bien explicada. Saludos!
    – DoubleM
    el 12 abr. 2018 a las 20:56
0

El problema es que el valor dentro de tu td no está en el html del propio td sino en un input. Tienes que acceder al children del td y luego al valor de input (o buscar el closest input, lo que mejor te venga). Tienes también que transformar el valor a número para que no te lo tome como texto y lo concatene (en este caso he usado Number()).

Te dejo un ejemplo resumido:

$(document).on('keyup','#datatable-buttons input.peso',function(){
  peso = $(this).val();
  sumar();
});

function sumar(){
  pesostotal = 0;
  $("#datatable-buttons tr").not(':first').each(function(){
    pesostotal = pesostotal + Number($(this).find('td:eq(2)').children().val());
  });
  $('#ptotal').val(pesostotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="datatable-buttons" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable-buttons_info" style="width: 100%;">
                     <thead>
<tr role="row">
  <th class="sorting_asc" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">#</th>
  <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 200px;" aria-label="Position: activate to sort column ascending">Calidad</th>
  <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Office: activate to sort column ascending">Peso</th>
  <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Age: activate to sort column ascending">Cajas</th>
  <th class="sorting" tabindex="0" aria-controls="datatable-buttons" rowspan="1" colspan="1" style="width: 50px;" aria-label="Start date: activate to sort column ascending">Precio</th>
  </tr>
  </thead>

  <tbody>
<tr role="row" class="odd">
  <td tabindex="0" class="sorting_1"><input type="hidden"></td>
  <td>
  </td>
  <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
  <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
  <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
</tr>
<tr role="row" class="odd">
  <td tabindex="0" class="sorting_1"><input type="hidden"></td>
  <td>
  </td>
  <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
  <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
  <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
</tr>
<tr role="row" class="odd">
  <td tabindex="0" class="sorting_1"><input type="hidden"></td>
  <td>
  </td>
  <td><input type="number" name="peso" placeholder="0" class="form-control peso"></td>
  <td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
  <td><input type="number" name="precio" placeholder="0" class="form-control precio"></td>
</tr>
  </tbody>
</table>
<input id="ptotal" type="text"/>

3
  • con $('#ptotal').text(pesostotal); me manda NaN y con val() como tu lo hiciste me manda 0.
    – DoubleM
    el 12 abr. 2018 a las 20:02
  • ¿Y qué valor tiene "pesostotal"?
    – Kiko_L
    el 12 abr. 2018 a las 20:21
  • Te devuelve NaN porque faltaba quitar el primer tr (el correspondiente al thead) con $("#datatable-buttons tr").not(':first'). Estaba intentando entonces coger el val del children pero no existía.
    – Kiko_L
    el 12 abr. 2018 a las 20:30

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.