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
    Commented 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 Commented el 12 abr. 2018 a las 19:50
  • listo, lo he añadido
    – DoubleM
    Commented el 12 abr. 2018 a las 19:50
  • cambia esa linea esto parseInt($(this).find('td:eq(2)').text()); Commented 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() Commented 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
    Commented 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
    Commented el 12 abr. 2018 a las 20:02
  • ¿Y qué valor tiene "pesostotal"?
    – Kiko_L
    Commented 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
    Commented el 12 abr. 2018 a las 20:30

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.