because I do not add the columns

Question

because I do not add the columns

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to add the weight column and show it in my <span id="ptotal"> the problem is that it always returns zero.

$(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>

javascript

asked by DoubleM 12.04.2018 в 21:45

source

2 answers

0

The problem is that the value within your td is not in the html of your own td but in a input . You have to access the children of the td and then the value of input (or look for the closest input , whichever best suits you). You also have to transform the value to number so that you do not take it as text and concatenate it (in this case I used Number() ).

I leave you a summarized example:

$(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"/>

answered by 12.04.2018 в 21:56

Error when converting date with 201801 format? How can I validate the mail domain before authenticating with google on firebase?

score 1 · Accepted Answer

I have changed your code considering first the case of how you get the value you do it with text() and that you should do it with val() because it is an input. On the other hand you can use the same selector to add your inputs #datatable-buttons input.peso thing that changes and that finally you should validate if the value you add is a validated value or otherwise you will become a NaN your 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>