无法通过php中的按钮打开模态框

Question

<?php
$result = mysqli_query($con, $sql);

while ($row = mysqli_fetch_array($result)) { 
    echo '<tr><td>';
    echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5>';
    echo '</td><td>';
    echo '<img src="'. $row['imagem']. '" alt>';
    echo '<a href="#" class="user-link">'. $row['nome'] . '</a>';
    echo '</td><td>';
    echo '<h5 style="margin-left:-180px; color:black;">'. $row['idaluno'] . '</h5></td>';
    echo '<td class="text-center">';
    echo '<h5 style="margin-left:6px; color:black; margin-left:-297px;">'. $row['situacao'] .'</h5>';
    echo '</td><td>';
    echo '<h5 style="margin-left:15px; color:black;">'. $row['faltas'] .'</h5>';
    echo '</td><td>';
    
   echo '<a href="editar.php?idaluno='. $row['id']  .'"><i style="margin-left:10px;" class="fa-solid fa-pencil"> </i></a>';
    
    
    echo '
    
    <button id="myBtn">
        <i style="margin-left:10px;" class="fa-solid fa-trash"></i>
    </button>';
   echo ' </td></tr>';

} 
?>

 <button id="myBtn">
        <i style="margin-left:10px;" class="fa-solid fa-trash"></i>
    </button>


<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>
<script>

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

我试图建立一个确认模式来尝试删除sql中的一行，我有php循环每行的按钮，但是该按钮在php内部不起作用，我在php循环之外也有该按钮并且它可以工作

我对 php 和 javascript 很陌生，我认为这可以通过 ajax 请求来解决，但我也对此迷失了。请帮忙

Answer 1

问题在于 JavaScript 代码设置为针对单个按钮和单个模式。使用 PHP 在循环中生成多个按钮时，每个按钮都需要有其唯一的标识符来定位和显示模式。通过在 PHP 循环中为每个按钮和模式动态生成唯一 ID。

<?php
$result = mysqli_query($con, $sql);

while ($row = mysqli_fetch_array($result)) { 
    $id = $row['id']; // Unique identifier for each row/modal
    echo '<tr><td>';
    echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5>';
    echo '</td><td>';
    echo '<img src="'. $row['imagem']. '" alt>';
    echo '<a href="#" class="user-link">'. $row['nome'] . '</a>';
    echo '</td><td>';
    echo '<h5 style="margin-left:-180px; color:black;">'. $row['idaluno'] . '</h5></td>';
    echo '<td class="text-center">';
    echo '<h5 style="margin-left:6px; color:black; margin-left:-297px;">'. $row['situacao'] .'</h5>';
    echo '</td><td>';
    echo '<h5 style="margin-left:15px; color:black;">'. $row['faltas'] .'</h5>';
    echo '</td><td>';
    
    echo '<a href="editar.php?idaluno='. $row['id']  .'"><i style="margin-left:10px;" class="fa-solid fa-pencil"> </i></a>';
    
    echo '<button id="myBtn'.$id.'" class="deleteBtn" data-id="'.$id.'">
        <i style="margin-left:10px;" class="fa-solid fa-trash"></i>
    </button>';
    echo '</td></tr>';

    echo '<div id="myModal'.$id.'" class="modal">
        <div class="modal-content">
          <span class="close" data-id="'.$id.'">&times;</span>
          <p>Are you sure you want to delete this row?</p>
          <a href="delete.php?id='.$id.'" class="confirm-delete">Delete</a>
        </div>
      </div>';
}
?>

<script>
// Function to handle showing the modal
function showModal(modalId) {
    var modal = document.getElementById(modalId);
    modal.style.display = "block";
}

// Function to handle closing the modal
function closeModal(modalId) {
    var modal = document.getElementById(modalId);
    modal.style.display = "none";
}

// Event listener for the delete buttons
document.querySelectorAll('.deleteBtn').forEach(function(button) {
    button.onclick = function() {
        var id = this.getAttribute('data-id');
        showModal('myModal' + id);
    };
});

// Event listener for the close buttons
document.querySelectorAll('.modal .close').forEach(function(span) {
    span.onclick = function() {
        var id = this.getAttribute('data-id');
        closeModal('myModal' + id);
    };
});

// Event listener to close the modal when clicking outside of it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = "none";
    }
}
</script>