Skip to main content
Fragmento de código
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Mi función jquery es la siguiente:

$("#adicionarPesaje").on('click', function(){
 $("#addTanquePesaje tbody tr:eq(0)").clone(true, true).appendTo('#addTanquePesaje').find('input').val("");
            

});

function CalcularTanque() {

$('#addTanquePesaje tr').each(function(){

    var cantidad = $('#txtCantidad').val();
    var tanque = $('select[name=cmbtanque]').val()
    var total = tanque * cantidad;

    $('#txtTotal').val(total);

})   

}

Mi HTML

    $("#adicionarPesaje").on('click', function(){
     $("#addTanquePesaje tbody tr:eq(0)").clone(true, true).appendTo('#addTanquePesaje').find('input').val("");
                
});

function CalcularTanque() {

    $('#addTanquePesaje tr').each(function(){

        var cantidad = $('#txtCantidad').val();
        var tanque = $('select[name=cmbtanque]').val()
        var total = tanque * cantidad;

        $('#txtTotal').val(total);

    })   
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="addTanquePesaje" class="mt-3">
       <tr>
         <td width = "120">
          <select class="form-control" name="cmbtanque" id="cmbTanque" >
            <option disabled selected>Tanque(Kg)</option>
          </select>
        </td>
        <td><input type="number" class="form-control" id="txtCantidad" name="txtCantidad[]" placeholder="Cantidad" value="0" onkeyup="CalcularTanque()"></td>
        <td><input type="number" class="form-control" id="txtTotal" name="txtTotal[]" placeholder="Total" readonly></td>
       <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
      </tr>
    </table>
    <table id="addTanquePesaje" class="mt-3">
   <tr>
     <td width = "120">
      <select class="form-control" name="cmbtanque" id="cmbTanque" >
        <option disabled selected>Tanque(Kg)</option>
      </select>
    </td>
    <td><input type="number" class="form-control" id="txtCantidad" name="txtCantidad[]" placeholder="Cantidad" value="0" onkeyup="CalcularTanque()"></td>
    <td><input type="number" class="form-control" id="txtTotal" name="txtTotal[]" placeholder="Total" readonly></td>
   <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
  </tr>
</table>
 

Mi función jquery es la siguiente:

$("#adicionarPesaje").on('click', function(){
 $("#addTanquePesaje tbody tr:eq(0)").clone(true, true).appendTo('#addTanquePesaje').find('input').val("");
            

});

function CalcularTanque() {

$('#addTanquePesaje tr').each(function(){

    var cantidad = $('#txtCantidad').val();
    var tanque = $('select[name=cmbtanque]').val()
    var total = tanque * cantidad;

    $('#txtTotal').val(total);

})   

}

Mi HTML

    <table id="addTanquePesaje" class="mt-3">
   <tr>
     <td width = "120">
      <select class="form-control" name="cmbtanque" id="cmbTanque" >
        <option disabled selected>Tanque(Kg)</option>
      </select>
    </td>
    <td><input type="number" class="form-control" id="txtCantidad" name="txtCantidad[]" placeholder="Cantidad" value="0" onkeyup="CalcularTanque()"></td>
    <td><input type="number" class="form-control" id="txtTotal" name="txtTotal[]" placeholder="Total" readonly></td>
   <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
  </tr>
</table>

    $("#adicionarPesaje").on('click', function(){
     $("#addTanquePesaje tbody tr:eq(0)").clone(true, true).appendTo('#addTanquePesaje').find('input').val("");
                
});

function CalcularTanque() {

    $('#addTanquePesaje tr').each(function(){

        var cantidad = $('#txtCantidad').val();
        var tanque = $('select[name=cmbtanque]').val()
        var total = tanque * cantidad;

        $('#txtTotal').val(total);

    })   
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="addTanquePesaje" class="mt-3">
       <tr>
         <td width = "120">
          <select class="form-control" name="cmbtanque" id="cmbTanque" >
            <option disabled selected>Tanque(Kg)</option>
          </select>
        </td>
        <td><input type="number" class="form-control" id="txtCantidad" name="txtCantidad[]" placeholder="Cantidad" value="0" onkeyup="CalcularTanque()"></td>
        <td><input type="number" class="form-control" id="txtTotal" name="txtTotal[]" placeholder="Total" readonly></td>
       <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
      </tr>
    </table>
 

Origen Enlace

Operaciones con campos dinamicos con jquery al clonar

Muy buenas tardes amigos,

Necesito una ayuda, cree una tabla con un select, y dos inputs. el select esta cargado con números desde la BD y el objetivo es que al colocarle un numero en el primer input este se multiplique por el valor seleccionado en el select y luego se muestre su resultado en el tercer input. esto debe hacerse las veces que lo haga el usuario por eso cree un botón para clonar la fila de la tabla que contiene estos elementos.

mi problema es que puedo hacer la operación para el primer grupo de elementos pero al clonarlos ya no me funciona.

Mi función jquery es la siguiente:

$("#adicionarPesaje").on('click', function(){
 $("#addTanquePesaje tbody tr:eq(0)").clone(true, true).appendTo('#addTanquePesaje').find('input').val("");
            

});

function CalcularTanque() {

$('#addTanquePesaje tr').each(function(){

    var cantidad = $('#txtCantidad').val();
    var tanque = $('select[name=cmbtanque]').val()
    var total = tanque * cantidad;

    $('#txtTotal').val(total);

})   

}

Mi HTML

    <table id="addTanquePesaje" class="mt-3">
   <tr>
     <td width = "120">
      <select class="form-control" name="cmbtanque" id="cmbTanque" >
        <option disabled selected>Tanque(Kg)</option>
      </select>
    </td>
    <td><input type="number" class="form-control" id="txtCantidad" name="txtCantidad[]" placeholder="Cantidad" value="0" onkeyup="CalcularTanque()"></td>
    <td><input type="number" class="form-control" id="txtTotal" name="txtTotal[]" placeholder="Total" readonly></td>
   <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
  </tr>
</table>