本文旨在解决在动态生成的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：
<td class='refuseAccept' style='display:block;'> <button type='button' class='btn btn-outline-danger'>refuse</button> <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>accept</button></td><td class='showOptions m-2' style='display:none;'> <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a> <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a> <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a></td>登录后复制
使用jQuery的DOM遍历
为了确保点击Accept按钮后，只改变当前行中特定元素的显示状态，我们需要使用jQuery的DOM遍历方法。
$(this): 引用触发事件的元素（在本例中是点击的Accept按钮）。$(this).closest('tr'): 找到最近的父级<tr>元素。$(this).closest('tr').find('.showOptions'): 在找到的<tr>元素中，查找所有Class为showOptions的元素。$(this).closest('tr').find('.refuseAccept'): 在找到的<tr>元素中，查找所有Class为refuseAccept的元素。修改后的Javascript代码如下：
飞书多维表格 表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版
26 查看详情 
$(document).on('click', '.acceptPpomentDoc', function() { $(this).closest('tr').find('.showOptions').show(); $(this).closest('tr').find('.refuseAccept').hide();});登录后复制这段代码的含义是：当点击Class为acceptPpomentDoc的元素时，找到它最近的父级<tr>元素，然后在该<tr>元素中，显示Class为showOptions的元素，并隐藏Class为refuseAccept的元素。
完整示例
以下是一个完整的示例，展示了如何使用Class和jQuery的DOM遍历方法来实现每一行Accept按钮的独立功能：
<!DOCTYPE html><html><head> <title>Accept Button Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <style> .showOptions { display: none; } </style></head><body><table class="table"> <thead> <tr> <th>#</th> <th>Patient Name</th> <th>Start Time</th> <th>End Time</th> <th>Actions</th> <th>Options</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Doe</td> <td>9:00 AM</td> <td>9:30 AM</td> <td class='refuseAccept'> <button type='button' class='btn btn-outline-danger'>Refuse</button> <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>Accept</button> </td> <td class='showOptions m-2'> <strong>ACCEPTED</strong> <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a> <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a> <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a> </td> </tr> <tr> <td>2</td> <td>Jane Smith</td> <td>10:00 AM</td> <td>10:30 AM</td> <td class='refuseAccept'> <button type='button' class='btn btn-outline-danger'>Refuse</button> <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>Accept</button> </td> <td class='showOptions m-2'> <strong>ACCEPTED</strong> <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a> <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a> <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a> </td> </tr> </tbody></table><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script> $(document).on('click', '.acceptPpomentDoc', function() { $(this).closest('tr').find('.showOptions').show(); $(this).closest('tr').find('.refuseAccept').hide(); });</script></body></html>登录后复制在这个示例中，我们创建了一个包含两行的表格。每一行都有一个Accept按钮，点击Accept按钮后，只有当前行的Options列会显示出来，而Actions列会被隐藏。
注意事项
确保引入jQuery库。避免在动态生成的HTML中使用重复的ID。使用Class来代替ID，以便对多个元素应用相同的样式或行为。使用jQuery的DOM遍历方法来确保操作只影响当前行。在实际项目中，可以根据需要修改CSS样式和HTML结构。总结
通过使用Class和jQuery的DOM遍历方法，我们可以轻松地为动态生成的HTML表格的每一行添加独立的Accept按钮功能。这种方法避免了ID重复的问题，并确保了代码的正确性和可维护性。 在处理动态HTML内容和需要对特定元素进行操作时，理解和应用DOM遍历是非常重要的。
以上就是为表格的每一行添加独立的Accept按钮功能的详细内容，更多请关注php中文网其它相关文章！
