本文旨在解决在动态生成的HTML表格中，为每一行添加独立的Accept按钮功能时遇到的问题。通过修改JavaScript代码，利用jQuery选择器准确定位每一行中的元素，并使用CSS类名替代重复的ID，确保Accept按钮的点击事件只影响当前行，从而实现预期的交互效果。
在动态生成的HTML表格中，为每一行添加一个Accept按钮，点击后显示特定列并隐藏其他列，是一个常见的需求。然而，如果处理不当，可能会出现点击一个按钮影响所有行的问题。本文将详细介绍如何正确实现这一功能，并避免常见的错误。
问题分析
原始代码的问题在于使用了相同的ID（showOptions和refuseAccept）多次。在HTML中，ID应该是唯一的，因此document.getElementById只会返回第一个匹配的元素。这导致点击任何一行的Accept按钮，都只会影响表格的第一行。
解决方案
解决此问题的关键在于：
使用类名代替ID：将id=’showOptions’和id=’refuseAccept’替换为class=’showOptions’和class=’refuseAccept’。使用jQuery选择器定位元素：利用jQuery的$(this)选择器，找到当前点击的按钮，然后使用.closest(‘tr’)找到该按钮所在的行，最后在该行内查找需要操作的元素。
以下是修改后的代码示例：
HTML (PHP)
prepare($sql); $stmt->execute(); $i=0; while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $i++; extract($row); echo" $i {$patientFName} {$patientLName} {$AppStart} {$AppEnd} "; } ?>
注意以下几点修改：
id 属性被替换为 class 属性。showOptions 单元格的 style=’display:none;’ 属性被添加，确保默认情况下该列是隐藏的。
JavaScript (jQuery)
$(document).on('click', '.acceptPpomentDoc', function() { $(this).closest('tr').find('.showOptions').show(); $(this).closest('tr').find('.refuseAccept').hide();});
这段代码的关键在于：
$(this): 指向触发点击事件的元素（即Accept按钮）。.closest(‘tr’): 从当前元素开始，向上查找最近的 元素，也就是包含该按钮的表格行。.find(‘.showOptions’): 在找到的表格行内，查找类名为 showOptions 的元素。.show() 和 .hide(): 分别用于显示和隐藏元素。
CSS (可选)
为了确保 showOptions 默认是隐藏的，可以在CSS中添加以下样式：
.showOptions { display: none;}
或者直接在HTML中通过行内样式设置。
完整示例
以下是一个完整的示例，包括HTML、JavaScript和CSS：
Accept Button Example .showOptions { display: none; }
| # | Name | Start | End | Actions | Options |
|---|---|---|---|---|---|
| 1 | John Doe | 9:00 | 10:00 | ACCEPTED | |
| 2 | Jane Smith | 10:00 | 11:00 | ACCEPTED |
注意事项
确保引入了 jQuery 库。如果表格是通过 AJAX 动态加载的，需要使用 $(document).on(‘click’, ‘.acceptPpomentDoc’, function() { … }); 这种事件委托方式，确保事件绑定到动态添加的元素上。如果需要更复杂的交互，例如发送 AJAX 请求，可以在 acceptPpomentDoc 点击事件处理函数中添加相应的代码。
总结
通过使用类名代替ID，并利用jQuery选择器准确定位每一行中的元素，可以有效地解决在动态生成的HTML表格中，为每一行添加独立的Accept按钮功能时遇到的问题。这种方法不仅可以避免ID重复的问题，还可以提高代码的可维护性和可扩展性。
以上就是为表格的每一行创建独立的Accept按钮功能的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327546.html
微信扫一扫 
支付宝扫一扫 
