本文针对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 ""; echo "".$res2['project_id']." "; echo "".$res2['project_name']." "; echo "".$res2['duedate']." "; echo "".$res2['subdate']." "; echo """.$res2['comment']."" "; echo "".$res2['status']." "; // 将id="myId" 改为 class="view-button" echo "View "; echo " "; }?>
注意： 我们还添加了 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”;: 显示弹出窗口。
完整示例：
| ID | Project Name | Due Date | Sub Date | Comment | Status | Option |
|---|---|---|---|---|---|---|
| ".$row['project_id']." | "; echo "".$row['project_name']." | "; echo "".$row['duedate']." | "; echo "".$row['subdate']." | "; echo """.$row['comment']."" | "; echo "".$row['status']." | "; echo "View | "; echo "
总结：
避免在动态生成的HTML元素中使用相同的ID。使用Class代替ID，并利用querySelectorAll方法为所有元素绑定事件监听器是解决此类问题的有效方法。同时，利用 data-* 属性可以方便地存储和获取与每个元素相关联的数据。
以上就是PHP动态表格按钮仅首行生效问题解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1290284.html
微信扫一扫 
支付宝扫一扫 
