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
    el 7 nov. 2020 a las 18:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.