javascript - 表格中只有第一行按钮起作用

Question

问题:在完整列中，单击后有"is"按钮，显示已咨询，但问题是只有一行正在工作。我不明白我如何唯一地定义每一行。请看一下这段代码，让我知道我在这里犯了什么错误。

<div class="card-body">
    <div class="table-responsive ">
<?php
    $query = "SELECT * FROM book_now";
    $query_run = mysqli_query($conn, $query);
?>
        <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
            <thead class="table table-success text-center" style="width: 80%">
                <tr>
                    <th style="width: 1%"> S.No </th>
                    <th> Patient Name </th>
                    <th> UHID </th>
                    <th style="width: 12%"> Time Slot </th>
                    <th> Contact No </th>
                    <th> Complete </th>
                    <th> Write Prescription </th>
                </tr>
            </thead>
            <tbody>
<?php
if(mysqli_num_rows($query_run) > 0)        
{
    foreach($query_run as $row)
    {
?>
                <tr class="text-center">
                    <td><?php  echo $row['booking_id']; ?></td>
                    <td><?php  echo $row['name']; ?></td>
                    <td><?php  echo $row['booked_by']; ?></td>
                    <td><?php  echo $row['appointment_time_slot']; ?></td>
                    <td><?php  echo $row['phone']; ?></td>
                    <td>
                        <form action="" method="post">
                            <input onclick="func()" id="accountDetails" type="button" value="Yes"></input>
<script>
function func() {
    document.getElementById('accountDetails').value  = 'Consulted';
}
</script>
                        </form>

Answer 1

问题是因为您正在使用 id重复内容中的属性会创建重复项。 id必须是独一无二的。

要解决此问题，请更改 id到 class ，然后您可以创建一个事件处理程序来监听任何 button 上的任何点击元素。从那里，您可以使用传递给事件处理程序的 Event 对象来仅更新被单击的按钮。

请注意，在下面的示例中，使用了不显眼的事件处理程序而不是内联 onclick属性。后者不是好的做法，应该避免。另请注意，该事件被委托(delegate)给父级 table 。这允许我们使用单个事件处理程序，无论表包含多少行/按钮，或者它们是在 DOM 加载后动态创建的。

document.querySelector('#dataTable').addEventListener('click', e => {
  if (e.target.matches('.accountDetails'))  
    e.target.value = 'Consulted';
});

<div class="card-body">
  <div class="table-responsive ">
    <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
      <thead class="table table-success text-center" style="width: 80%">
        <tr
          <th> Complete </th>
          <th> Write Prescription </th>
        </tr>
      </thead>
      <tbody>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>        
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>