0

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.

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

1 respuesta 1

0

Te funciona solo con la primera fila porque estás usando ID y, al clonar, se duplican. Recuerda que las ID deben ser únicas.

Solución: Accede a cada elemento por clase, tipo o nombre. Por ejemplo, al clonar, en lugar de poner valor vacío a todos los input, aplica solo a los que son de tipo número, para evitar modificar también el botón:

...  .find('input[type="number"]').val("");

En el HTML, elimina ID de todos los elementos que se van a clonar, para evitar comportamientos extraños. Como estás recorriendo todas las filas para realizar los cálculos, usa cada fila para obtener los campos, teniendo en cuenta que su nombre tiene corchetes y no puedes simplemente incluirlos en una cadena de selección de jQuery, porque tienen significado especial (de expresión regular).

$(this).find('input[name^="txtCantidad"]').val();

Con esa línea, le dices a jQuery que busque el input con nombre específico, pero evitando incluir los corchetes (que deben escaparse) y, en su lugar, usar circunflejo ^ para decir el nombre inicia con...

Nota: Para poder probar, puse valor a la única opción del select y agregué un botón para clonar la fila.

También cambié el método onkeyup por onchange, porque algunos navegadores incluyen botones para incrementar/decrementar los campos numéricos y es conveniente realizar el cálculo con este evento.

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

function CalcularTanque() {
    $('#addTanquePesaje tr').each(function(){
        var cantidad = $(this).find('input[name^="txtCantidad"]').val();
        var tanque = $(this).find('select').val()
        var total = tanque * cantidad;
        $(this).find('input[name^="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[]">
            <option value="30" selected>Tanque(Kg)</option>
          </select>
        </td>
        <td><input type="number" class="form-control" name="txtCantidad[]" placeholder="Cantidad" value="0" onchange="CalcularTanque()"></td>
        <td><input type="number" class="form-control" name="txtTotal[]" placeholder="Total" readonly></td>
       <td class="eliminarPesaje"> <input class="btn btn-warning" type="button" value="-"> </td> 
      </tr>
    </table>
    <button id="adicionarPesaje">+</button>

1
  • Funciona muy bien el código pero como puedo hacer para que se eliminen los campos con el botón de eliminar? Commented el 15 mar. 2021 a las 0:50

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.