本文旨在解决在动态生成的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代码如下：
$(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遍历是非常重要的。