本文旨在解决在动态生成的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遍历是非常重要的。
