本文旨在解决在动态生成的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：
使用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代码如下：
$(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按钮的独立功能：
Accept Button Example .showOptions { display: none; }
| # | Patient Name | Start Time | End Time | Actions | Options |
|---|---|---|---|---|---|
| 1 | John Doe | 9:00 AM | 9:30 AM | ACCEPTED | |
| 2 | Jane Smith | 10:00 AM | 10:30 AM | ACCEPTED |
在这个示例中，我们创建了一个包含两行的表格。每一行都有一个Accept按钮，点击Accept按钮后，只有当前行的Options列会显示出来，而Actions列会被隐藏。
注意事项
确保引入jQuery库。避免在动态生成的HTML中使用重复的ID。使用Class来代替ID，以便对多个元素应用相同的样式或行为。使用jQuery的DOM遍历方法来确保操作只影响当前行。在实际项目中，可以根据需要修改CSS样式和HTML结构。
总结
通过使用Class和jQuery的DOM遍历方法，我们可以轻松地为动态生成的HTML表格的每一行添加独立的Accept按钮功能。这种方法避免了ID重复的问题，并确保了代码的正确性和可维护性。 在处理动态HTML内容和需要对特定元素进行操作时，理解和应用DOM遍历是非常重要的。
以上就是为表格的每一行添加独立的Accept按钮功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327464.html
微信扫一扫 
支付宝扫一扫 
