为表格的每一行创建Accept按钮

本文旨在解决在动态生成的HTML表格中，为每一行添加一个"Accept"按钮，点击后显示特定列的问题。我们将详细介绍如何使用jQuery来实现这一功能，避免常见错误，并提供清晰的代码示例，确保即使是初学者也能轻松理解和应用。重点在于避免在循环中使用相同的ID，而是采用类名和相对路径来定位元素。

问题分析与解决方案

在动态生成的表格中，为每一行添加交互功能，最常见的错误是使用相同的ID。HTML中ID应该是唯一的，如果在循环中使用相同的ID，JavaScript将只会找到第一个匹配的元素，导致后续行无法正常工作。

正确的解决方案是使用类名（class）代替ID，并利用jQuery的DOM遍历方法，如closest()和find()，来精确定位需要操作的元素。

实现步骤

1. 修改HTML结构：

   将refuseAccept和showOptions的id属性更改为class属性。

   
       prepare($sql);
       $stmt->execute();
       $i=0;
       while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
           $i++;
           extract($row);
           echo"
               $i
               {$patientFName} {$patientLName}
               {$AppStart}
               {$AppEnd}
               
                   refuse
                   accept
               
               
                    
                    
                    
               
           ";
       }
       ?>
   

   注意：showOptions 初始时 display:none，refuseAccept 初始时 display:block。

2. 编写jQuery代码：

   

   crmeb电商系统

   CRMEB 是基于Thinkphp5基础开发的以会员为中心的电商系统，开源版微信公众号商城和小程序商城数据同步，带积分、优惠券、秒杀、砍价、分销等功能，更是一套方便二次开发的商城框架（后台封装了独有快速创建表单功能，无需写表单页面、快速创建数据搜索和数据列表页、导出表格、系统权限配置控制每一个控制器方法、系统参数配置、数据字典、组合数据等）

   下载

   使用$(this)引用点击的按钮，然后使用closest('tr')找到包含该按钮的

   元素。再使用find()方法在 元素内部查找具有相应类名的元素，并进行显示或隐藏操作。

   $(document).on('click', '.acceptPpomentDoc', function() {
       // $(this) references the item clicked, in this case the accept button
       $(this).closest('tr').find('.showOptions').show();
       // find the containing , then from there find the div with class name showOptions and set display:block
       $(this).closest('tr').find('.refuseAccept').hide();
       // find the containing , then from there find the div with class name refuseAccept and set display:none
   });

3. 添加CSS样式（可选）：

   如果需要在页面加载时隐藏showOptions列，可以在CSS中添加以下样式。

   .showOptions {
       display: none;
   }

4. 引入jQuery库 确保在HTML文件中引入了jQuery库。

完整示例代码

以下是一个完整的示例，展示了如何实现这个功能：

    
    
    
    
    


    

        

            

                
#
                
Name
                
Start
                
End
                
Actions
                
Options
            
        
        

            

                
1
                
John Doe
                
10:00
                
11:00
                

                    Refuse
                    Accept
                
                

                    ACCEPTED
                     
                     
                     
                
            
            

                
2
                
Jane Smith
                
11:00
                
12:00
                

                    Refuse
                    Accept
                
                

                    ACCEPTED
                     
                     
                     
                
            
        
    

注意事项

• 确保jQuery库已正确引入。
• 避免在循环中使用相同的ID。
• 使用类名和DOM遍历方法来定位元素。
• 在动态生成HTML后，事件委托（$(document).on('click', ...)）是确保事件处理程序能够绑定到新添加的元素的有效方法。

总结

通过使用类名和jQuery的DOM遍历方法，我们可以轻松地为动态生成的表格中的每一行添加交互功能。 这种方法避免了使用相同ID的问题，并确保了代码的可维护性和可扩展性。 记住，理解DOM结构和jQuery的选择器是编写高效JavaScript代码的关键。