Skip to main content
se eliminaron 90 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25

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 closestclosest 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()).

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

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()).

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

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()).

$(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"/>
se añadieron 1089 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25
$(document).on('keyup','#peso''#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>
<input id="peso" type="text"/>

<table id="datatable-buttons">
<thead>
               buttons" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable-buttons_info" <trstyle="width: role="row">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="Agelabel="Start date: activate to sort column ascending">Cajas<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 <thtype="number" class="sorting"name="cajas" tabindex="0"placeholder="0" aria-controls="datatableclass="form-buttons"control rowspan="1"cajas"></td>
 colspan="1" style="width:<td><input 50px;"type="number" arianame="precio" placeholder="0" class="form-label="Startcontrol date:precio"></td>
</tr>
<tr activaterole="row" toclass="odd">
 sort column<td ascending">Precio</th><tabindex="0" class="sorting_1"><input type="hidden"></tr>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>
</thead>tr>
<tr><tr role="row" class="odd">
  <td><<td tabindex="0" class="sorting_1"><input type="hidden"></td>
  <td><<td>
  </td>
  <td><input value="3"/></td>
</tr>
<tr>
type="number" name="peso" <td><placeholder="0" class="form-control peso"></td>
  <td><<td><input type="number" name="cajas" placeholder="0" class="form-control cajas"></td>
  <td><input value="5"/><type="number" name="precio" placeholder="0" class="form-control precio"></td>
</tr>
  </tbody>
</table>
<input type="text" id="ptotal" type="text"/>
$(document).on('keyup','#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>
<input id="peso" type="text"/>

<table id="datatable-buttons">
<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>
<tr>
  <td></td>
  <td></td>
  <td><input value="3"/></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><input value="5"/></td>
</tr>
</table>
<input type="text" id="ptotal"/>
$(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"/>
se añadieron 1191 caracteres en el cuerpo
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25
$(document).on('keyup','#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>
<input id="peso" type="text"/>

<table id="datatable-buttons">
<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>
<tr>
  <td></td>
  <td></td>
  <td><input value="3"/></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><input value="5"/></td>
</tr>
</table>
<input type="text" id="ptotal"/>
$(document).on('keyup','#peso',function(){
                peso = $(this).val();
                        
                sumar();
        });

    function sumar(){
            pesostotal = 0;
            $("#datatable-buttons tr").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>
<input id="peso" type="text"/>

<table id="datatable-buttons">
<tr>
  <td></td>
  <td></td>
  <td><input value="3"/></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><input value="5"/></td>
</tr>
</table>
<input type="text" id="ptotal"/>
$(document).on('keyup','#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>
<input id="peso" type="text"/>

<table id="datatable-buttons">
<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>
<tr>
  <td></td>
  <td></td>
  <td><input value="3"/></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td><input value="5"/></td>
</tr>
</table>
<input type="text" id="ptotal"/>
Origen Enlace
Kiko_L
  • 6.6k
  • 1
  • 13
  • 25
Loading