PHP动态表格按钮仅首行生效问题解决方案

本文针对PHP动态生成的表格中，按钮点击事件仅在首行生效的问题，提供了基于JavaScript的解决方案。核心在于避免在循环中使用相同的ID，而是采用Class选择器，并使用querySelectorAll方法为所有按钮绑定事件监听器，确保每一行按钮都能触发相应的弹出窗口。

在动态生成的HTML表格中，经常会遇到需要为每一行添加按钮，并为这些按钮绑定点击事件的需求。然而，如果处理不当，可能会出现只有第一行的按钮能够正常工作，而其他行的按钮点击无效的问题。这通常是由于在循环中使用了相同的ID导致的。HTML中ID应该是唯一的，当使用document.getElementById获取元素时，只会返回第一个匹配的元素。

解决方案：使用Class代替ID，并利用querySelectorAll绑定事件

正确的做法是使用Class代替ID，并使用querySelectorAll方法来选取所有具有该Class的元素，然后为每个元素分别绑定事件监听器。

立即学习“PHP免费学习笔记（深入）”；

1. 修改PHP代码：

   将PHP循环中按钮的ID改为Class。

   ";
           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相关的信息。

   

   arXiv Xplorer

   ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。

   下载

2. 修改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";: 显示弹出窗口。

完整示例：

 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 "";
            echo "";
            echo "";
            echo "";
            echo "";
            echo "";
            echo "";
            echo "";
            echo "";
        }
        ?>
    

    

        
ID
        
Project Name
        
Due Date
        
Sub Date
        
Comment
        
Status
        
Option
    
    

        
".$row['project_id']."
".$row['project_name']."
".$row['duedate']."
".$row['subdate']."
\"".$row['comment']."\"
".$row['status']."
View



    

        
+
        
Project Details
        

    

总结：

避免在动态生成的HTML元素中使用相同的ID。使用Class代替ID，并利用querySelectorAll方法为所有元素绑定事件监听器是解决此类问题的有效方法。同时，利用 data-* 属性可以方便地存储和获取与每个元素相关联的数据。