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

Posted 2023-05-08

【中文标题】如何为表格中的每一行制作一个接受按钮？

【英文标题】：How can I make an accept button for each row in the table?

【发布时间】：2022-01-04 21:59:13

【问题描述】：

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

【问题讨论】：

原因：对于所有显示的记录，您使用单个 Id 作为 showOptions（和 rejectAccept）。解决方案之一是通过将每个操作链接到唯一的 Id 来修改您的代码

【参考方案1】：

不要多次使用同一个 id。而是使用类名或其他属性。您可以使用相对路径引用目标 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>