为表格的每一行添加独立的Accept按钮功能

本文旨在解决在动态生成的HTML表格中，为每一行添加独立的Accept按钮并控制其对应行的显示与隐藏的问题。通过避免重复ID的使用，并利用jQuery的DOM遍历功能，实现点击Accept按钮后，仅改变当前行中特定元素的显示状态，从而确保每一行Accept按钮的功能互不干扰。

在动态生成的HTML表格中，为每一行添加独立的Accept按钮并控制其对应行的显示与隐藏，是一个常见的需求。然而，直接使用ID来操作DOM元素，容易因为ID重复而导致JavaScript代码只对第一行生效。本文将介绍如何使用类名（class）和jQuery的DOM遍历方法来解决这个问题，确保每一行的Accept按钮都能独立工作。

避免ID重复：使用Class代替ID

在HTML中，ID应该是唯一的，而Class可以重复使用。当我们需要对多个元素应用相同的样式或行为时，应该使用Class。

原代码中使用了id='showOptions'和id='refuseAccept'，这导致所有行都共享相同的ID，使得JavaScript代码只能找到第一个匹配的元素。我们需要将它们改为Class：

    refuse
    accept


     
     
     

使用jQuery的DOM遍历

为了确保点击Accept按钮后，只改变当前行中特定元素的显示状态，我们需要使用jQuery的DOM遍历方法。

• $(this): 引用触发事件的元素（在本例中是点击的Accept按钮）。
• $(this).closest('tr'): 找到最近的父级元素。
• $(this).closest('tr').find('.showOptions'): 在找到的元素中，查找所有Class为showOptions的元素。
• $(this).closest('tr').find('.refuseAccept'): 在找到的元素中，查找所有Class为refuseAccept的元素。

  修改后的JavaScript代码如下：

  

  KGOGOMALL

  主要功能：无限级分类，可自由调整分类位置，商品可在各分类间自由转移； 商品组合：可以为每种商品添加多种选项，方便顾客购买选择，比如：一件衣服顾客可以选择款式、花色、大小等，笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性； 会员分级功能，会员积分功能。可根据会员积分自行设定用户组，管理员可自行定义会员获得积分的方式：按订单总金额或者按单个商品给予积分； 按照商品类别查看热卖、特价，允

  下载

  $(document).on('click', '.acceptPpomentDoc', function() {
    $(this).closest('tr').find('.showOptions').show();
    $(this).closest('tr').find('.refuseAccept').hide();
  });

  这段代码的含义是：当点击Class为acceptPpomentDoc的元素时，找到它最近的父级

  元素，然后在该 元素中，显示Class为showOptions的元素，并隐藏Class为refuseAccept的元素。

  完整示例

  以下是一个完整的示例，展示了如何使用Class和jQuery的DOM遍历方法来实现每一行Accept按钮的独立功能：

  
  
  
    
    
    
    
  
  
  
  
    
  
      
  
        
  #
        
  Patient Name
        
  Start Time
        
  End Time
        
  Actions
        
  Options
      
    
    
  
      
  
        
  1
        
  John Doe
        
  9:00 AM
        
  9:30 AM
        
  
          Refuse
          Accept
        
        
  
          ACCEPTED
           
           
           
        
      
      
  
        
  2
        
  Jane Smith
        
  10:00 AM
        
  10:30 AM
        
  
          Refuse
          Accept
        
        
  
          ACCEPTED
           
           
           
        
      
    
  
  
  
  
  
  
  

  在这个示例中，我们创建了一个包含两行的表格。每一行都有一个Accept按钮，点击Accept按钮后，只有当前行的Options列会显示出来，而Actions列会被隐藏。

  注意事项

  • 确保引入jQuery库。
  • 避免在动态生成的HTML中使用重复的ID。
  • 使用Class来代替ID，以便对多个元素应用相同的样式或行为。
  • 使用jQuery的DOM遍历方法来确保操作只影响当前行。
  • 在实际项目中，可以根据需要修改CSS样式和HTML结构。

  总结

  通过使用Class和jQuery的DOM遍历方法，我们可以轻松地为动态生成的HTML表格的每一行添加独立的Accept按钮功能。这种方法避免了ID重复的问题，并确保了代码的正确性和可维护性。 在处理动态HTML内容和需要对特定元素进行操作时，理解和应用DOM遍历是非常重要的。