Tengo una tabla como esta:
<table class="table"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Usernames</th> <th scope="col">number</th> <th scope="col">Type</th> <th scope="col">Date</th> <th scope="col"></th> </tr> </thead> <tbody> <?php foreach($projects as $project) { echo '<tr>'; echo '<th>'.$project['id'].'</th>'; echo '<td>'.$project['user'].'</td>'; echo '<td>'.$project['number'].'</td>'; echo '<td>'.$project['user_type'].'</td>'; echo '<td>'.$project['logs'].'</td>'; echo '<td><a href="view-details" class="btn btn-sm btn-primary" id="view_files" ">View</a></td>'; echo '</tr>'; } ?> </tbody> </table>Estoy tratando de representar los detalles de la tabla anterior en otro div (que se muestra a continuación) en la misma página pero en otro panel de vista de ventana usando el botón 'Ver'.
<div class="row my-4"> <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"> <div class="card"> <h5 class="card-header">Customers</h5> <div class="card-body" id="more-info"> <h5 class="card-title"> <?php echo $post['id']; ?> </h5> <p class="card-text"> <?php echo $post['user']; ?> </p> <p class="card-text text-success"> <?php echo $post['catch_code']; ?> </p> </div> </div> </div> El foreach del primer ejemplo se iteró con el botón "ver" para cada elemento. Necesito que se muestre cada elemento cuando hago clic en 'Ver' en él. Me preocupaba si al hacer clic en "ver", se mostrarían todos los elementos, ya que la iteración es la misma que la id en el botón Ver.
Por favor, proponme una solución.
El problema que tiene es que está creando varios elementos con la misma id en su bucle. Esto no es válido ya que los valores de id deben ser únicos dentro del DOM.
Para solucionar este problema, cambie el atributo id a una class . Luego puede completar el enlace 'Ver' con atributos de data que contienen la información para completar el div #more-info cuando se hace clic en el botón.
Prueba esto:
let $idField = $('h5.user-id'); let $userField = $('p.user'); let $catchCodeField = $('p.catch-code'); $('.view-files').on('click', e => { e.preventDefault(); let $btn = $(e.target); let id = $btn.data('id'); let user = $btn.data('user'); let catchCode = $btn.data('catchcode'); $idField.text(id); $userField.text(user); $catchCodeField.text(catchCode); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="table"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Usernames</th> <th scope="col">number</th> <th scope="col">Type</th> <th scope="col">Date</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th>001</th> <td>User 001</td> <td>Number 001</td> <td>User type 001</td> <td>Logs 001</td> <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="001" data-user="User 001" data-catchcode="Catch code 001">View</a></td> </tr> <tr> <th>002</th> <td>User 002</td> <td>Number 002</td> <td>User type 002</td> <td>Logs 002</td> <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="002" data-user="User 002" data-catchcode="Catch code 002">View</a></td> </tr> <tr> <th>003</th> <td>User 003</td> <td>Number 003</td> <td>User type 003</td> <td>Logs 003</td> <td><a href="view-details" class="btn btn-sm btn-primary view-files" data-id="003" data-user="User 003" data-catchcode="Catch code 003">View</a></td> </tr> </tbody> </table> <div class="row my-4"> <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"> <div class="card"> <h5 class="card-header">Customers</h5> <div class="card-body" id="more-info"> <h5 class="card-title user-id"></h5> <p class="card-text user"></p> <p class="card-text text-success catch-code"></p> </div> </div> </div> </div>