2

Hola buenas tengo un problema, y es que cuando abro una ventana modal con javascript, tengo datos extraidos de una tabla de mysql, el problema es que tengo que hacer un calculo multiplicando el valor númerico que se coloca en el input por cada uno de los valores de las celdas que aparecen en el Campo Cantidad. El resultado necesito que aparezca en el campo "Cantidad de Unidades". he colocado un boton "Asignar cantidad" que apuntaria a la funcion control() para hacer la operación pero no tengo idea de como hacerla sin mandar datos con ajax. Adjunto la imagen del modal

introducir la descripción de la imagen aquí

//perdón por la ignorancia y desde ya muchas gracias

// adjunto código del modal con la tabla

 <div class="modal fade" id="AgregarPro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">



<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Listado de productos simples</h4>
<h2></h2>
<div class="col-md-3">
 <label >Cantidad ingresada:</label>
 <input type="text" maxlength="2"class="form-control" name="obs_ent" id="ctexto" placeholder="cantidad" value="" >

  Asignar cantidad

///

<?php
require_once 'data/conexion.php';

$sql = "SELECT producto_comp.id_producto as idcomp, productos.name as name, productos.modelo as modelo,  productos.nro_expediente as expediente, productos.stock_actual as stockactual, producto_comp.cantidad_producto as cantidad  from producto_comp, productos where   productos.id_producto = producto_comp.id_producto  and producto_comp.id_area = '$id_area'";
$result = mysqli_query($conn, $sql);
?>


              <table id="sampleTable2" class="table table-hover table-bordered">

                                 <thead>


                                <tr>
                                    <th class='text-center'>Código</th>

                                    <th class='text-center'>Producto-Modelo</th>
                                    <th class='text-left' style= 'min-width:60px;'>Expediente</th>

                                    <th class="text-center"> Stock actual </th>
                                    <th class="text-center">Cantidad</th>
                                    <th class="text-center">Cantidad de unidades</th>

                                </tr>

                                </thead>
                                <tbody>




    <?php


while ($row = mysqli_fetch_array($result)) {
  ?> <tr><?php
$codigo = $row['idcomp'];
$producto = $row['name'] . '-' . $row['modelo'];
 $expediente = $row['expediente'];
   $stock = $row['stockactual'];
  $cantidad = $row['cantidad'];
   $Total = 
  ?>


            <td class='text-center' style= 'width:5px;'><?php echo $codigo; ?></td>
                                            <td style= 'min-width:70px;'><?php echo $producto; ?></td>
                                            <td style= 'min-width:40px;'><?php echo $expediente; ?></td>
                                            <td class='text-center' ><?php echo $stock; ?></td>
                                              <td style= 'min-width:40px;'><?php echo $cantidad; ?></td>
                                               <td style= 'min-width:40px;'><?php echo $Total; ?></td>



     </tr>
     <?php
}
?>



</tbody>
 <tfoot>
   <tr>
     <th></th>
   </tr>


 </tfoot>



 </table>

// $total = debería mostrar el resultado de la multiplicación del valor de input //x el campo cantidad

5
  • 1
    Imposible ayudarte sino compartes tu codigo.
    – alanfcm
    Commented el 3 oct. 2019 a las 15:24
  • No entiendo nada y no podemos ayudarte si no nos dices que llevas. Reestructura tu pregunta. Commented el 3 oct. 2019 a las 15:33
  • Lo que necesito es que al colocar un valor un valor en el input multiplique cada celda del campo "Cantidad" y muestre el valor en el campo "cantidad de unidades". todo el calculo lo debiera hacer al presionar el boton "Asignar cantidad", queria saber con una funcion javascript pero sin mandar datos por ajax.
    – Julio
    Commented el 3 oct. 2019 a las 15:40
  • ¿Supongo que usas Jquery o no? Commented el 3 oct. 2019 a las 15:45
  • SI pero no se como puedo implementar la función
    – Julio
    Commented el 3 oct. 2019 a las 15:48

2 respuestas 2

2

No necesitas Ajax porque ya tienes todos los datos en el front. Puedes hacerlo asi:

function asignar() {
  var cantidad = $("#ctexto").val();
  $('table tbody tr').each(function(i, tr) {
    var cant = $(tr).find('td:eq(1)').text();
    $(tr).find('td:eq(2)').html(cant*cantidad);
  });
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#AgregarPro">Open Modal</button>
<div class="modal fade" id="AgregarPro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">



<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Listado de productos simples</h4>
<h2></h2>
<div class="col-md-3">
 <label >Cantidad ingresada:</label>
 <input type="text" maxlength="2"class="form-control" name="obs_ent" id="ctexto" placeholder="cantidad" value="" >
 <button onClick="asignar()">Asignar Cantidad</button>
 <table>
 <thead>
 <tr>
 <th>codigo</th>
 <th>cantidad</th>
 <th>cantidad unidades</th>
 </tr>
 </thead>
 <tr>
 <td>1</td>
 <td>1</td>
 <td>0</td>
 </tr>
 <tr>
 <td>2</td>
 <td>2</td>
 <td>0</td>
 </tr>
 </table
 </div>
 </div>
 </div>
 </div>

1

A la tabla de tu HTML, a los <td> que almacenan tanto la cantidad como el total agregarás dos clases cant y total. Eso nos ayudará a identificar las celdas más rápida.

Te dejo un ejemplo documentado

$( () => {

  $(document).on('click', '.btn', function(e) {
      // Corta la acción nativa del botón
      e.preventDefault(); e.stopPropagation();
       
      // Ciclamos todos los rows
      $('.table tbody tr').each(function(){
           
          // Buscamos la celda stock y sacamos su valor
          const cant = Number( $(this).find('td.cant').text() );
          
          //Sacamos el valor del input
          const multi = Number( $('.input').val() );
          
          // Hacemos la operación correspondiente
          const total =  cant * multi;
          
          // Se valida que la multiplicación sea correcta
          if( isNaN( total ) ) {
            alert( 'No se pueden multiplicar los valores ' + cant + ' y ' + multi );
            return false;
          } else {
            // Seteamos el vamor en la celda total
            $(this).find('td.total').text( total );
          }
          
      });
    
  });
  
});
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="row">
  <div class="col-sm-12">
    <div class="d-flex m-3">
      <input class="form-control w-25 input mr-2" value="0">
      <button class="btn btn-primary">Asignar</button>
    </div>
  </div>
</div>

<table class="table table-sm table-hover">
  <thead>
    <tr>
        <th class='text-center'>Código</th>
        <th class='text-center'>Producto-Modelo</th>
        <th class='text-left' style='min-width:60px;'>Expediente</th>
        <th class="text-center"> Stock actual </th>
        <th class="text-center">Cantidad</th>
        <th class="text-center">Cantidad de unidades</th>
    </tr>

</thead>
<tbody>
    <tr>
        <td>001</td>
        <td>Producto 1</td>
        <td>EXP 1</td>
        <td>100</td>
        <td class="cant">2</td>
        <td class="total"></td>
    </tr>
    <tr>
        <td>002</td>
        <td>Producto 2</td>
        <td>EXP 2</td>
        <td>200</td>
        <td class="cant">5</td>
        <td class="total"></td>
    </tr>
    <tr>
        <td>003</td>
        <td>Producto 3</td>
        <td>EXP 3</td>
        <td>300</td>
        <td class="cant">9</td>
        <td class="total"></td>
    </tr>
</tbody>
</table>

1
  • Excelente, muchas gracias las dos respuestas funcionan!!!
    – Julio
    Commented el 3 oct. 2019 a las 16:14

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.