本文针对PHP动态生成的表格中，按钮点击事件仅在首行生效的问题，提供了基于JavaScript的解决方案。核心在于避免在循环中使用相同的ID，而是采用Class选择器，并使用querySelectorAll方法为所有按钮绑定事件监听器，确保每一行按钮都能触发相应的弹出窗口。
在动态生成的HTML表格中，经常会遇到需要为每一行添加按钮，并为这些按钮绑定点击事件的需求。然而，如果处理不当，可能会出现只有第一行的按钮能够正常工作，而其他行的按钮点击无效的问题。这通常是由于在循环中使用了相同的ID导致的。HTML中ID应该是唯一的，当使用document.getElementById获取元素时，只会返回第一个匹配的元素。
解决方案：使用Class代替ID，并利用querySelectorAll绑定事件
正确的做法是使用Class代替ID，并使用querySelectorAll方法来选取所有具有该Class的元素，然后为每个元素分别绑定事件监听器。
立即学习“PHP免费学习笔记（深入）”；
-
修改PHP代码：
将PHP循环中按钮的ID改为Class。
<?php while ($res2=mysqli_fetch_assoc($result2)) { echo "<tr>"; echo "<td>".$res2['project_id']."</td>"; echo "<td>".$res2['project_name']."</td>"; echo "<td>".$res2['duedate']."</td>"; echo "<td>".$res2['subdate']."</td>"; echo "<td>\"".$res2['comment']."\"</td>"; echo "<td>".$res2['status']."</td>"; // 将id="myId" 改为 class="view-button" echo "<td><a href=\"#\" class=\"view-button\" data-project-id=\"".$res2['project_id']."\">View</a></td>"; echo "</tr>"; } ?>注意： 我们还添加了 data-project-id 属性，用于存储每一行对应的项目ID。这个属性可以在点击事件中方便地获取，用于后续的操作，例如加载与该项目ID相关的信息。
-
修改JavaScript代码：
使用querySelectorAll选取所有Class为view-button的元素，并为每个元素绑定点击事件。
document.querySelectorAll('.view-button').forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); // 阻止默认的链接跳转行为 // 获取当前按钮对应的项目ID var projectId = this.getAttribute('data-project-id'); // 根据项目ID执行相应的操作，例如显示弹出窗口 document.querySelector('.bg-modal').style.display = "flex"; // 这里可以添加根据projectId加载数据到弹出窗口的逻辑 // 例如：fetch('/api/project/' + projectId) // .then(response => response.json()) // .then(data => { // // 将数据填充到弹出窗口中 // }); }); });代码解释：
- document.querySelectorAll('.view-button'): 选取所有Class为view-button的元素，返回一个NodeList。
- .forEach(function(button) { ... }): 遍历NodeList中的每一个元素（按钮）。
- button.addEventListener('click', function(event) { ... }): 为每一个按钮绑定点击事件监听器。
- event.preventDefault(): 阻止默认的链接跳转行为，避免页面跳转到#。
- this.getAttribute('data-project-id'): 获取当前点击的按钮的 data-project-id 属性值。
- document.querySelector('.bg-modal').style.display = "flex";: 显示弹出窗口。
完整示例：
<table>
<tr>
<th align="center">ID</th>
<th align="center">Project Name</th>
<th align="center">Due Date</th>
<th align="center">Sub Date</th>
<th align="center">Comment</th>
<th align="center">Status</th>
<th align="center">Option</th>
</tr>
<tr>
<?php
// 模拟数据库数据
$data = [
['project_id' => 1, 'project_name' => 'Project A', 'duedate' => '2024-12-31', 'subdate' => '2024-12-25', 'comment' => 'Good', 'status' => 'Completed'],
['project_id' => 2, 'project_name' => 'Project B', 'duedate' => '2025-01-15', 'subdate' => '2025-01-10', 'comment' => 'In Progress', 'status' => 'Ongoing'],
['project_id' => 3, 'project_name' => 'Project C', 'duedate' => '2025-02-28', 'subdate' => null, 'comment' => 'Needs Review', 'status' => 'Pending']
];
foreach ($data as $row) {
echo "<tr>";
echo "<td>".$row['project_id']."</td>";
echo "<td>".$row['project_name']."</td>";
echo "<td>".$row['duedate']."</td>";
echo "<td>".$row['subdate']."</td>";
echo "<td>\"".$row['comment']."\"</td>";
echo "<td>".$row['status']."</td>";
echo "<td><a href=\"#\" class=\"view-button\" data-project-id=\"".$row['project_id']."\">View</a></td>";
echo "</tr>";
}
?>
</tr>
</table>
<div class="bg-modal" style="display: none;">
<div class="modal-content">
<div class="close">+</div>
<h2>Project Details</h2>
<p id="project-details"></p>
</div>
</div>
<script>
document.querySelectorAll('.view-button').forEach(function(button) {
button.addEventListener('click', function(event) {
event.preventDefault();
var projectId = this.getAttribute('data-project-id');
document.querySelector('.bg-modal').style.display = "flex";
// 模拟数据加载，实际情况替换成ajax请求
var projectDetails = "Project ID: " + projectId;
document.getElementById('project-details').innerText = projectDetails;
// 关闭modal
document.querySelector('.close').addEventListener('click', function() {
document.querySelector('.bg-modal').style.display = "none";
});
});
});
</script>
<style>
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
width: 500px;
height: 300px;
background-color: white;
border-radius: 4px;
text-align: center;
padding: 20px;
position: relative;
}
.close {
position: absolute;
top: 0;
right: 14px;
font-size: 42px;
transform: rotate(45deg);
cursor: pointer;
}
</style>总结：
避免在动态生成的HTML元素中使用相同的ID。使用Class代替ID，并利用querySelectorAll方法为所有元素绑定事件监听器是解决此类问题的有效方法。同时，利用 data-* 属性可以方便地存储和获取与每个元素相关联的数据。
