Quiero hacer un botón de aceptar donde cuando presiono el botón de aceptar se muestra otra columna, funcionó bien en la primera fila de la tabla, pero las otras filas no funcionaron.
Aquí está mi código HTML y PHP:
<tbody> <?php $sql = "SELECT * FROM appointments INNER JOIN patients ON appointments.patientID =patients.patientID WHERE docID='$doctorId'"; $stmt = $conn->prepare($sql); $stmt->execute(); $i=0; while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $i++; extract($row); echo"<tr> <td >$i</td> <td>{$patientFName} {$patientLName}</td> <td>{$AppStart}</td> <td>{$AppEnd}</td> <td id='refuseAccept' style='display:block;'> <button type='button' class='btn btn-outline-danger'>refuse</button> <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc' >accept</button> </td> <td id='showOptions' style='display:none; class='m-2' > <a href='#' title='view Details' class='text-success p-2 addappoment' > <i class='fas fa-calendar-check'></i></a> <a href='#' title='Edit' class='text-primary p-2 editBtn' ><i class='fas fa-user-edit'></i> </a> <a href='#' title='Delete' class='text-danger p2 deleteBtn' ><i class='fas fa-user-times'></i> </a> </td> </tr> "; } ?> </tbody>y aquí está Javascript:
$(document).on('click','.acceptPpomentDoc', function (){ document.getElementById('showOptions').style.display = "block"; document.getElementById('refuseAccept').style.display = "none"; });No use la misma identificación varias veces. En su lugar, utilice un nombre de clase u otro atributo. Puede hacer referencia a las etiquetas div de destino utilizando rutas relativas, como:
$(document).on('click', '.acceptPpomentDoc', function() { // $(this) references the item clicked, in this case the accept button $(this).closest('tr').find('.showOptions').show(); // find the containing <tr>, then from there find the div with class name showOptions and set display:block $(this).closest('tr').find('.refuseAccept').hide(); // find the containing <tr>, then from there find the div with class name refuseAccept and set display:none }); $(document).on('click', '.acceptPpomentDoc', function() { $(this).closest('tr').find('.showOptions').show(); $(this).closest('tr').find('.refuseAccept').hide(); }); .showOptions { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>$i</td> <td>{$patientFName} {$patientLName}</td> <td>{$AppStart}</td> <td>{$AppEnd}</td> <td class='refuseAccept'> <button type='button' class='btn btn-outline-danger'>refuse</button> <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>accept</button> </td> <td class='showOptions m-2'><strong>ACCEPTED <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a> <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a> <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a> </td> </tr> </table>