本文旨在解决在动态生成的HTML表格中，为每一行添加一个"Accept"按钮，点击后显示特定列的问题。我们将详细介绍如何使用jQuery来实现这一功能，避免常见错误，并提供清晰的代码示例，确保即使是初学者也能轻松理解和应用。重点在于避免在循环中使用相同的ID，而是采用类名和相对路径来定位元素。
问题分析与解决方案
在动态生成的表格中，为每一行添加交互功能，最常见的错误是使用相同的ID。HTML中ID应该是唯一的，如果在循环中使用相同的ID，JavaScript将只会找到第一个匹配的元素，导致后续行无法正常工作。
正确的解决方案是使用类名（class）代替ID，并利用jQuery的DOM遍历方法，如closest()和find()，来精确定位需要操作的元素。
实现步骤
修改HTML结构：
将refuseAccept和showOptions的id属性更改为class属性。
注意：showOptions 初始时 display:none，refuseAccept 初始时 display:block。
编写jQuery代码：
PHP 8.5.5
PHP 8.5.5 是 PHP 8.5 分支的维护更新版本。该版本延续了“小步快跑”的迭代逻辑，通过深度错误修复、底层性能微调以及安全加固，旨在为开发者提供一个更健壮、更高效的运行环境。该版本严格遵守语义化版本规范，不包含破坏性变更。
下载
使用$(this)引用点击的按钮，然后使用closest('tr')找到包含该按钮的zuojiankuohao
php
cntr>元素。再使用find()方法在元素内部查找具有相应类名的元素，并进行显示或隐藏操作。
prepare($sql);
$stmt->execute();
$i=0;
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$i++;
extract($row);
echo"
$i
{$patientFName} {$patientLName}
{$AppStart}
{$AppEnd}
";
}
?>
$(document).on('click', '.acceptPpomentDoc', function() {
// $(this) references the item clicked, in this case the accept button
$(this).closest('tr').find('.showOptions').show();
// find the containing , then from there find the div with class name showOptions and set display:block
$(this).closest('tr').find('.refuseAccept').hide();
// find the containing , then from there find the div with class name refuseAccept and set display:none
});
添加CSS样式（可选）：
如果需要在页面加载时隐藏showOptions列，可以在CSS中添加以下样式。
.showOptions {
display: none;
}
引入jQuery库
确保在HTML文件中引入了jQuery库。
Accept Button Example
#
Name
Start
End
Actions
Options
1
John Doe
10:00
11:00
ACCEPTED
2
Jane Smith
11:00
12:00
ACCEPTED
注意事项
确保jQuery库已正确引入。
避免在循环中使用相同的ID。
使用类名和DOM遍历方法来定位元素。
在动态生成HTML后，事件委托（$(document).on('click', ...)）是确保事件处理程序能够绑定到新添加的元素的有效方法。
总结
通过使用类名和jQuery的DOM遍历方法，我们可以轻松地为动态生成的表格中的每一行添加交互功能。 这种方法避免了使用相同ID的问题，并确保了代码的可维护性和可扩展性。 记住，理解DOM结构和jQuery的选择器是编写高效JavaScript代码的关键。
相关文章