0

hola necesito obtener todos los datos de la columna "producto" en un array pero todos los ejemplos que busco toman la fila completa y eso no me sirve...he buscado soluciones con jquery y javascript nada de lo que veo me sirve. Gracias de antemano. Basicamente lo que quiero hacer es que cuando se pulse en un boton , que al cargar está oculto, cargue toda la columna "PRODUCTOS" en un array, que luego pueda enviar a otro archivo .php que estoy preparando. adjunto una imagen de mi tabla

AQUÍ MI CÓDIGO

<table class="table table-bordered col-6" id="miTabla">
            <thead>
                <tr class="bg-info text-center">
                    <th scope="col">PRODUCTO</th>
                    <th scope="col">PRECIO</th>
                    <th scope="col">CANTIDAD</th>
                    <th scope="col">SUBTOTAL</th>                        
                </tr>
            </thead>

            <tbody>
                <?php
                if (isset($_SESSION['carrito'])) {

                    for ($i = 0; $i <= count($compras) - 1; $i++) {

                        if ($compras[$i] != NULL) {
                            ?>
                            <tr class="text-center selected" id="fila<?php echo $cont++; ?>" onclick="seleccionar(this.id);" title="Seleccionar una fila y luego click en Eliminar">
                                <td width="60%" class="nombre1"><?php echo $compras[$i]['descripcion']; ?> <input type="hidden" class="nombre" name="list[]" value="<?php echo $compras[$i]['descripcion']; ?>"></td>
                                <td width="10%"><?php echo $compras[$i]['precio']; ?></td>
                                <td width="10%"><input type="number" class="form-control input al_cargar" value="1" required="true"></td>
                                <td width="10%"><input type="text" class="form-control total" value="<?php echo $compras[$i]['precio']; ?>" disabled></td>
                            </tr>
                            <?php
                        }
                    }
                } else {
                    echo "No hay productos en el carrito";
                }
                ?>
            <tfoot>
                <tr class="text-center">                    
                    <td colspan="3">                              
                        <div class="row justify-content-center">   
                            <button class="btn btn-danger" id="eliminar" title="Eliminar fila seleccionada"><i class="fa fa-trash"></i></button>
                            &nbsp;&nbsp;
                            <button class="btn btn-info calculos">Calcular&nbsp;&nbsp;<i class="fa fa-calculator"></i></button>                                                                                            
                            &nbsp;&nbsp;
                            <button class="btn btn-success siguiente" title="siguiente">Comprar ahora</button>
                        </div>
                    </td>                        
                    <td>
                        <strong class="text-right">TOTAL</strong>
                        <!--Aquí va el resultado total-->
                    </td>                        
                </tr>
            </tfoot>
            </tbody>
        </table>       
3
  • 1
    Puedes darle una clase al td de esa columna y recoger cada valor en el onclick del botón con querySelectorAll o de otro modo. Inténtalo y si tienes algún problema nos dices, poniendo el código que estás usando (este es un problema a resolver en el cliente, por tanto, usando Javascript).
    – A. Cedano
    Commented el 10 dic. 2020 a las 21:55
  • ok veré si entiendo, voy a probarlo y luego aviso Commented el 10 dic. 2020 a las 23:47
  • $(document).ready(function () { $('.siguiente').show(); $('.siguiente').click(function () { var productos = document.querySelectorAll(".nombre1"); alert(productos.length); }); //Fin de Siguiente.click }); //Fin de Document Ready ___intente eso y no encuentro como mostrar el array pero puse el .length y me muestra que si tengo 2 producto...como hago para mostrar el vector Commented el 11 dic. 2020 a las 0:05

2 respuestas 2

0

Se puede lograr recorriendo cada fila y despues por su columna, en caso de hacer algo dinámico te recomiendo construir la tabla con JS, y de esa manera ya tendrias los datos guardado, pero una solucion como la que buscas sera de esta manera, en caso de que la tabla ya no se mueva.

function obtener(){
  var lista = [];
  var l = $("#tablaProductos tbody tr td");
  //recorres todos los datos y obtienes solo lo necesario
  Object.keys(l).forEach((k,v) => {
    if(v%4 == 0 && l[k].innerText){
      console.log(l[k].innerText)
      lista.push(l[k].innerText);
    }
  });
  console.log(lista);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaProductos" border="1">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Subtotal</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Producto A</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto B</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto C</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto D</td><td>10</td><td>2</td><td>20</td>
        </tr>
    </tbody>
</table>
<button onclick="obtener()">Obtener</button>

2
  • hola! esto es lo que estoy buscando, pero cuando copio el código y lo pego me da errores en "if(v%4 == 0 && l[k].innerText){" Commented el 11 dic. 2020 a las 20:55
  • falta ponerle id a tu tabla <table id="tablaProductos" border="1"> Commented el 11 dic. 2020 a las 22:42
0

Primero debes obtener todas las filas de la tabla, lo cual puedes hacer fácilmente con HTMLTableElement.rows, esto incluye filas en <thead>, <tfoot>, y <tbody>.

Ya que tienes las filas, recorres cada una de ellas y evaluas si el número de celdas en esa fila mayor al de la columna que quieres obtener. Se empieza desde la fila 1, ya que la fila 0 es el header de la tabla. Si quieres obtener la columna = 4 para una tabla que tiene columnas = 3, entonces cada fila tiene un total de 3 celdas por lo que es imposible obtener la celda 4, ya que no existe.

En el código, se hace la resta de menos 1 a la columna solicitada ya que para tener una mejor comprensión, se maneja en lógica 1.

Por último, si nada ha sido agregado al array, la función devuelve null. Entonces al llamar a la función se asigna el resultado de la función a un elemento dentro del DOM o en tu caso, se puede usar como argumento para la función que enviará el array al archivo .php.

function obtenerColumna(idTabla, columna) {
  const tabla = document.getElementById(idTabla);
  const filas = tabla.rows.length;
  const array = [];
  columna -= 1;

  // Revisar si la columna es menor que 0
  if (columna < 0) {
    return null;
  }

  // Empezar desde el índice 1 para evitar el header
  for (let i = 1; i < filas; i++) {
    // Revisar si el número de celda no está fuera de rango
    if (tabla.rows[i].cells.length > columna) {
      array.push(tabla.rows[i].cells[columna].innerText);
    }
  }

  return array.length ? array : null;
}

const btnObtenerColumna = document.getElementById('btnObtenerColumna');
const numeroDeColumna = document.getElementById('numeroColumna');
const resultado = document.getElementById('resultado');

btnObtenerColumna.addEventListener('click', () => {
  const columna = obtenerColumna('tablaProductos', numeroDeColumna.value);
  resultado.innerText = columna;
});
<table id="tablaProductos" border="1">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Subtotal</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Producto A</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto B</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto C</td><td>10</td><td>2</td><td>20</td>
        </tr><tr>
            <td>Producto D</td><td>10</td><td>2</td><td>20</td>
        </tr>
    </tbody>
</table>
<input type="number" id="numeroColumna" value="1" min="1" />
<button id="btnObtenerColumna">Get column</button>
<hr/>
Result:
<pre id="resultado"></pre>

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.