如何为表格中的每一行制作一个接受按钮？

Question

我想制作一个接受按钮，当我按下接受按钮时，会显示另一列，它在表格的第一行工作正常，但其他行没有工作。
这是我的 HTML 和 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>

这是Javascript：

$(document).on('click','.acceptPpomentDoc', function (){
 document.getElementById('showOptions').style.display = "block";
document.getElementById('refuseAccept').style.display = "none";
}); 

Answer 1

不要多次使用相同的 id。 而是使用 class 名称或其他属性。 您可以使用相对路径引用目标 div 标签，例如：

$(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>