0

Tengo unas base de datos con una tabla llamada vehículos en la que guardo una imagen y otras columnas, he sacado las imágenes por pantalla y que al darlas click te salga un texto debajo, quiero que al dar click encima de una de ellas me saque la fila de esa imagen en el recuadro, con un while y un fetch_array he conseguido que saque por pantalla todas las imágenes de la tabla, después igualo en la consulta la imagen de la tabla con el row['imagen'] pero al dar click en cualquiera de ellas solo me sale la última fila de la tabla y me he quedado atascado aquí, alguien sabe como solucionarlo, gracias.

<body>
    <figure>
        <div class="container">
            <div class="row mb-1 p-2">
                <h2 style="text-align:center">Vehículos</h2>
            </div>
            
            <div class="row mb-1 p-2">
                <a href="nuevovehiculo.php" class="btn btn-primary">Nuevo Vehículo</a>
            </div>
            
            <br>
            <script languague="javascript">
        function mostrar() {
            div = document.getElementById('flotante');
            div.style.display = '';
        }

        function cerrar() {
            div = document.getElementById('flotante');
            div.style.display = 'none';
        }
</script>
<?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario'";
    $resultado = mysqli_query($con, $sql);
    
?>
<?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {    extract($row);
?>
            <p><a href="javascript:mostrar();"><img style="width:200px; height:150px" src="images/<?php echo $row['imagen'];$img=$row['imagen']; ?>"></a></p>
            <?php } ?>

<article id="flotante" style="display:none;">
     <article id="close"><a href="javascript:cerrar();">cerrar</a></article>
            <div style="width: 100%" class="row table-responsive">
                <table class="table table-condensed table-striped">
                    <thead>
                        <tr>
                            <th>Imágen</th>
                            <th>Número de bastidor</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Gasolina</th>
                            <th>Precio Combustible</th>                            
                        </tr>
                    </thead>
                    
                    <tbody>
                    <?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario' and imagen='$img' ";
    $resultado = mysqli_query($con, $sql);
    
?>
                        <?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {    extract($row);
?>
                            <tr>
                                <td><img src="images/<?php echo $row['imagen']; ?>"  class="img-rounded" width="50px" height="50px"/></td>
                                <td><?php echo $row['num_bastidor']; ?></td>
                                <td><?php echo $row['marca']; ?></td>
                                <td><?php echo $row['modelo']; ?></td>
                                <td><?php echo $row['contr_homologacion']; ?></td>
                                <td><?php echo $row['procedencia']; ?></td>
                                <td><?php echo $row['gasolina']; ?></td>
                                <td><?php echo $row['precio_gas']; ?></td>
                                <td><?php echo $row['usuarios_username']; ?></td>
                                <td><a href="#" data-href="eliminarvehiculo.php?num_bastidor=<?php echo $row['num_bastidor']; ?>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
        </article> 

1 respuesta 1

0

Revisa que el ID "flotante" al estar dentro de un while se repite., y recuerda que los IDs no se deben repetir.

Te recomiendo que a la función mostrar() le pases un parámetro del tipo numérico quedaría así mostrar(id) y ese ID representa el ID del registro de la imagen para evitar que se repita.

En la declaración del ID concaténale el ID del registro al ID de la fila:

" style="display:none;">

Y en la llamada de la funcion mostrar no lo llames como mostrar() solamente, sino que lo llamas mostrar('flotante') algo así.

Con esa idea que te di, debes guiarte. Lo que te esta pasando es que el reconoce solo el último ID ya que lo estás repitiendo.

Saludos

5
  • Lo he intentado y no soy capaz de hacerlo, soy principiante y algunas cosas se me escapan, me podrías poner un ejemplo de como sería, muchas gracias el 6 dic. 2020 a las 20:19
  • Modifica esto y déjame saber si te funciona de tu lado: Busca esta función y modifícala así: function mostrar(id) { div = document.getElementById('flotante'+id); div.style.display = ''; } Y en estas líneas que quede así: <p><a href="javascript:mostrar(<?php echo $row['id']; ?>);"><img style="width:200px; height:150px" src="images/ <article id="flotante<?php echo $row['id']; ?>" style="display:none;"> La parte que te puse, que dice $row['id'] ese id representa el nombre del campo único de la tabla vehículos.
    – gbelen
    el 7 dic. 2020 a las 1:47
  • Me dice que el id no esta definido, no entiendo muy bien lo que quieres hacer con el id, pero en el src necesito que sea la imagen para que me la muestre el 7 dic. 2020 a las 2:14
  • Cual ID es que te dice que no está definido? Porque como te dije el id que está en $row['id'] depende del nombre del campo de tu tabla vehiculos.
    – gbelen
    el 7 dic. 2020 a las 4:34
  • El row['id'] es el que me pone que no está definido, como hago para asignarle un nombre de la tabla el 7 dic. 2020 a las 10:39

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.