1

Primeramente quiero decir que no soy experto en javascript, lo que quiero hacer es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item automaticamente en el input total, y a medida que yo vaya agregando un plan en la tabla, no se como hacerlo he estado buscado mucho información por internet y necesito ayuda.

$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});

De aqui hago una consulta php para los planes y un boton que agrega el plan

<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                </tbody>
            </table>
</fieldset>
1
  • Hola Dario, bienvenido a Stack Overflow en español. Te recomiendo realizar el recorrido de bienvenida así podes enterarte como funciona el sitio.
    – Marcos
    Commented el 4 abr. 2022 a las 15:48

1 respuesta 1

0

Ya que estas usando jQuery, podrías hacer lo siguiente:

  • Te suscribis al evento input que suceda en los input de la tabla.
  • Luego buscas los input de la fila donde se disparo el evento.

Ejemplo:

$('#tablaplan').on('input', 'input', function() {
  let $tr = $(this).closest('tr'), // buscamos la fila
    $valor = $tr.find('input.valor'),
    $cantidad = $tr.find('input.cantidad'),
    $total = $tr.find('input.total');
 
  // Calculamos y actualizamos el total
  $total.val(parseFloat($valor.val()) * parseFloat($cantidad.val()));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tabla">
  <thead>
    <tr>
      <th>Id</th>
      <th>Plan</th>
      <th>Valor</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="tablaplan">
    <tr id=1>
      <td class="id">1</td>
      <td>nombre 1</td>
      <td valor=1>
        <input class="valor" type=number value="1" min="0">
      </td>
      <td>
        <input class="cantidad" type=number value="1" min="1">
      </td>
      <td>
        <input class="total" type=number value="1" readonly>
      </td>
    </tr>
    <tr id=2>
      <td class="id">2</td>
      <td>nombre 2</td>
      <td valor=2>
        <input class="valor" type=number value="2" min="0">
      </td>
      <td>
        <input class="cantidad" type=number value="1" min="1">
      </td>
      <td>
        <input class="total" type=number value="2" readonly>
      </td>
    </tr>
  </tbody>
</table>


Referencias:

1
  • Muchas Gracias amigo, estaba sufriendo por eso. Commented el 4 abr. 2022 a las 16:08

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.