Como ver datos de una tabla al dar click?

publicado por: Anonymous

Ya estuve investigando y todo y no puedo encontrar como hacerlo, explico lo que quiero hacer…

Tengo esta tabla en PHP y MYSQL…
introducir la descripción de la imagen aquí

_x000D_

_x000D_

<table>_x000D_
<thead>_x000D_
     ..._x000D_
</thead>_x000D_
<tbody class="buscar1">_x000D_
    <?php_x000D_
    include("XXXXXXX/conexion.php");_x000D_
    $sql = "SELECT *,_x000D_
            COUNT(no_pedido) as ped,_x000D_
            SUM(cantidad),_x000D_
            SUM(precio_venta)_x000D_
            FROM tblpedido INNER JOIN tblusers_x000D_
            WHERE status = 'EN PROCESO'_x000D_
            AND tblpedido.id_usuario=tblusers.id_x000D_
            GROUP BY no_pedido";_x000D_
    $result=mysqli_query($conexion, $sql);_x000D_
    while ($row=mysqli_fetch_array($result))_x000D_
    {_x000D_
    ?>_x000D_
    <tr>_x000D_
        <td style="text-align: center">_x000D_
            <a href="" style="text-decoration: none;"> <!---- aqui quiero dar click ---->_x000D_
            <i class="fas fa-eye fa-lg"></i> <?php echo $row['no_pedido']; ?>_x000D_
            </a>_x000D_
        </td>_x000D_
        <td style="text-align: center"><?php echo $row['fecha_pedido1']; ?></td>_x000D_
        <td style="text-align: center"><?php echo $row['SUM(cantidad)']; ?></td>_x000D_
        <td style="text-align: center">$ <?php echo $row['SUM(precio_venta)']; ?> MXN</td>_x000D_
                ..._x000D_
    </tr>_x000D_
    <?php _x000D_
    }_x000D_
    $result->free();_x000D_
    mysqli_close($conexion);_x000D_
    ?>_x000D_
</tbody>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Al dar click en numero de pedido1 me muestre en un modal todos los datos del pedido1 o al dar click en numero de pedido2 me muestre en un modal todos los datos del pedido2 ya si sucesivamente si tuviera más pedidos.

Los datos que quiero que me muestre en una tabla dentro del modal por ejemplo de pedido 1 o pedido2 en cada caso si doy click son:

introducir la descripción de la imagen aquí

No se si me puedo explicar muchas gracias
Saludos

solución

Pues yo lo resolvería usando javascript, más concretamente jQuery.

Empezaría añadiendo una clase a la imagen sobre la que quieres aplicar el evento. Por ejemplo, a esta clase la llamaremos ‘npedido’:

<td style="text-align: center">
    <a href="" style="text-decoration: none;" class='npedido'> 
    <i class="fas fa-eye fa-lg"></i> <?php echo $row['no_pedido']; ?>
    </a>
</td>

Posteriormente deberás trabajar con eventos de jQuery. En este caso utilizaremos el evento click()

$('.npedido').on('click', function(){
    // Do something here
});

Con esto último lo que hacemos es aplicarle el evento click a todos los elementos que contengan la clase ‘npedido’.

Ahora viene la chicha. Lo seguiente será realizar una llamada ajax a servidor para recuperar los datos que quieras mostrar. De esto hay muchísima información, así que te pongo varios enlaces que te serán útiles:

Ejemplo llamada asíncrona .ajax

Documentación .ajax de jQuery

La llamada asíncrona deberás hacerla dentro del evento click, obviamente.

Por último queda pintar el resultado en una ventana modal. Como también hay muchísima información sobre esto, te adjunto algunos enlaces de interés.

Ventanas modales con jQuery UI

Ventanas modales sólo con css

Ventanas modales con javascript, html y css

Como te he dicho, hay muchísima información y ejemplos en la red, sólo te he puesto tres de ellos.

Y con esto creo que no se me queda nada, tendrías todas las herramientas necesarias para poder hacer lo que quieres. Espero que te sirva y no dudes en preguntar cualquier duda.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *