0

Tengo una Tabla, en la cual cargo productos para la venta, en las 2 ultimas columnas de la tabla cargo una columna de Checkbox (para marcar el producto que se va a vender) y otra de Select (Cada select tiene cantidades máximas diferentes,puesto que son lo que queda en inventario),el objetivo es mostrar los datos que se va a vender antas de enviar toda la información al servidor, el problema que tengo es que no puedo obtener el valor (booleano) de los checkbox's y los valores de los select's

Adjunto código de ejemplo para que se me entienda mejor....

Código HTML

<label>Seleccione los Productos</label>
                        <table id="tablaventas">
                           <thead>
                              <tr>
                                 <th><center>No</center></th>
                                 <th><center>Descripción</center></th>
                                 <th><center>Precio</center></th>
                                 <th><center>Marcar</center></th>
                                 <th><center>Cantidad</center></th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <th>1</th>
                                 <td>Producto 1</td>
                                 <td>100 $</td> 
                                 <td >
                                    <input type="checkbox">
                                 </td>  
                                 <td >
                                    <select>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
                                       <option value="3">3</option>
                                       <option value="4">4</option>
                                    </select>
                                 </td>                                                              
                              </tr>
                              <tr>
                                 <th>2</th>
                                 <td>Producto 2</td>
                                 <td>130 $</td> 
                                 <td >
                                    <input type="checkbox">
                                 </td>  
                                 <td >
                                    <select>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
                                       <option value="3">3</option>
                                       <option value="4">4</option>
                                       <option value="5">5</option>
                                    </select>
                                 </td>                                                              
                              </tr>
                              <tr>
                                 <th>3</th>
                                 <td>Producto 3</td>
                                 <td>170 $</td> 
                                 <td >
                                    <input type="checkbox">
                                 </td>  
                                 <td >
                                    <select>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
                                    </select>
                                 </td>                                                              
                              </tr>
                              <tr>
                                 <th>4</th>
                                 <td>Producto 4</td>
                                 <td>200 $</td> 
                                 <td >
                                    <input type="checkbox">
                                 </td>  
                                 <td >
                                    <select>
                                       <option value="1">1</option>
                                       <option value="2">2</option>
                                       <option value="3">3</option>
                                    </select>
                                 </td>                                                              
                              </tr>
                              
                           </tbody>
                        </table>


                        <button onclick="mostrarResumenVenta()">Vender</button>

Código Java Script

<script type="text/javascript">

   function mostrarResumenVenta()
      {
         //Guardo la tabla en una variable
         var table = document.getElementById('tablaventas');
         //Guardo la Cantidad de Productos que hay en la Tabla
         var numProductos = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
         //Variable para guardar la cantidad de CheckBox seleccionados
         var numCheck = 0;

         //Array que contendra la descripcion de cada producto seleccionado
         var productos = [];
         //Array que contendra la Cantidad que proviene del Select dentro de la tabla
         var cantProductos = [];


         for (var i = 1; i < numProductos + 1; i++)
         {
            //Aqui tengo el problema ya que no logro obtener el valor booleano del checkbox que esta en la tabla
            if (table.rows[i].cells[3].checked = true)
            {
               //Guardo en el array la descripcion del producto Ejem: Producto 3
               productos.push(table.rows[i].cells[1].innerHTML);
               //Guardo en el array la Cantidad del producto Ejem: 2
               //Aqui tambien tengo el problema, no logro capturar el valor del select que esta en la tabla
               cantProductos.push(table.rows[i].cells[4].value);
               numCheck = numCheck + 1;
            }
         }

         

         for (var i = 0; i < numCheck; i++)
         {
            alert("Esta por Vender: " + numProductos[i] + " unidades del producto " + productos[i]);
         }






      }

</script>

soy principiante en el área así que espero por favor puedan ayudarme...

1 respuesta 1

0

Recomiendo que uses dos variables diferentes para guardar todo los <select> y <input>

<script type="text/javascript">

   function mostrarResumenVenta()
      {
         //Guarda la tabla en una variable
         var table = document.getElementById('tablaventas');
         //Guarda los selects y inputs querySelectorAll crea un array de todos los items del DOM
         var inputCheck = table.querySelectorAll('input[type="checkbox"]');
         var selectAmount = table.querySelectorAll('select');
         //Variable para guardar la cantidad de CheckBox seleccionados
         var numCheck = 0;

         //Array que contendra la descripcion de cada producto seleccionado
         var productos = [];
         //Array que contendra la Cantidad que proviene del Select dentro de la tabla
         var cantProductos = [];

         //Usa cualquier de las dos variables, inputCheck o selectAmount ya que contienen el mismo length
         for (var i = 0; i < inputCheck.length; i++)
         {
            //Usar variable con [i]
            if (inputCheck[i].checked) //No es necesario poner == true (pero puedes usarlo)
            {
               //Guarda en el array la descripcion del producto Ejem: Producto 3
               productos.push(table.rows[i].cells[1].innerHTML);
               //Guarda en el array la Cantidad del producto Ejem: 2
               //Consigue el value del producto
               cantProductos.push(selectAmount[i].value);
               numCheck = numCheck + 1; //Usar numCheck++; menos espacio
            }
         }

         

         for (var i = 0; i < numCheck; i++)
         {
            alert("Esta por Vender: " + numProductos[i] + " unidades del producto " + productos[i]);
         }






      }

</script>
1
  • Mira detalladamente las correcciones, si necesitas ayuda. Ponme un comentario
    – ABC
    Commented el 7 nov. 2020 a las 18:10

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.