本文旨在解决在动态生成的HTML表格中，为每一行添加一个”Accept”按钮，点击后显示特定列的问题。我们将详细介绍如何使用jQuery来实现这一功能，避免常见错误，并提供清晰的代码示例，确保即使是初学者也能轻松理解和应用。重点在于避免在循环中使用相同的ID，而是采用类名和相对路径来定位元素。
问题分析与解决方案
在动态生成的表格中，为每一行添加交互功能，最常见的错误是使用相同的ID。HTML中ID应该是唯一的，如果在循环中使用相同的ID，JavaScript将只会找到第一个匹配的元素，导致后续行无法正常工作。
正确的解决方案是使用类名（class）代替ID，并利用jQuery的DOM遍历方法，如closest()和find()，来精确定位需要操作的元素。
实现步骤
修改HTML结构：
将refuseAccept和showOptions的id属性更改为class属性。
prepare($sql); $stmt->execute(); $i=0; while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $i++; extract($row); echo" $i {$patientFName} {$patientLName} {$AppStart} {$AppEnd} "; } ?>
注意：showOptions 初始时 display:none，refuseAccept 初始时 display:block。
编写jQuery代码：
使用$(this)引用点击的按钮，然后使用closest(‘tr’)找到包含该按钮的
元素。再使用find()方法在元素内部查找具有相应类名的元素，并进行显示或隐藏操作。
$(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 $(document).on('click', '.acceptPpomentDoc', function() { $(this).closest('tr').find('.showOptions').show(); $(this).closest('tr').find('.refuseAccept').hide(); }); .showOptions { display: none; } # 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代码的关键。
以上就是为表格的每一行创建Accept按钮的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327594.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
多模态AI如何处理地震波数据 多模态AI地质灾害预警系统
多模态ai通过整合地震波、地表形变、气象数据、历史记录及地质信息等多种数据源，构建综合分析模型，显著提升了地震预警的准确性。1）结合地震波与insar地表形变数据，实现更准确的地震定位；2）融合地震波与历史数据，提升震级估计精度；3）实时监测形变与气象数据，加快预警发布速度；4）整合地质结构与历史记…
-
SublimeText如何进行代码折叠_快速收起和展开代码块技巧
Sublime Text通过快捷键、侧边栏标记和上下文菜单实现代码折叠，提升代码阅读与导航效率。核心操作包括：Ctrl+Shift+[ / ]（折叠/展开当前块）、Ctrl+K, Ctrl+0（折叠所有）、Ctrl+K, Ctrl+J（展开所有），以及按层级折叠和折叠HTML属性。这些功能降低认知负…
-
2025年在线小说阅读网站推荐-完结小说免费观看平台排行
优先选择番茄小说、七猫小说、飞读小说等大厂平台，资源全且稳定，依托广告免费阅读；起点读书和晋江文学城设有免费专区与限时活动，可定期关注；第三方聚合软件存在版权与稳定性风险，不建议长期依赖。 想找地方看免费的完结小说，现在确实有不少平台可以选择。重点是区分清楚哪些是正规正版的免费平台，哪些可能只是短期…
-
打工圈APP如何绑定手机号
打开打工圈 app 首先，在手机主屏幕上找到打工圈的图标，轻触打开应用。如果尚未安装该应用，可前往手机的应用商店搜索“打工圈”并完成下载与安装。 进入个人中心 启动应用后，界面底部通常设有导航栏，其中包含“我的”这一选项，点击即可进入个人中心页面。这里是管理个人信息、设置功能和查看服务的核心区域。 …
-
如何调用IBM Watson的AI服务 Watson自然语言处理API实战
调用ibm watson的nlp服务主要包括以下步骤：1. 创建ibm cloud账号并开通watson natural language understanding服务；2. 获取api密钥和服务url，建议保存至配置文件或环境变量；3. 使用python构造请求头、请求体并发送post请求进行a…
-
炫书网热门小说在线阅_炫书网TXT完结下载页
炫书网在线阅读入口为https://www.xsw.la/，该平台提供海量小说在线阅读与TXT下载，涵盖多种题材，支持多设备流畅阅读，并设有社区互动、个性化设置及高效检索功能。 炫书网热门小说在线阅读入口在哪里？这是不少读者关心的问题，接下来由PHP小编为大家带来炫书网在线阅读及TXT完结小说下载的…
-
SublimeText运行Go语言程序_Go语言构建系统设置全攻略
首先确认Go环境已正确安装并配置PATH，接着在Sublime Text中创建Go构建系统：通过Tools→Build System→New Build System输入指定JSON配置并保存为Go.sublime-build，然后打开.go文件按Ctrl+B或Cmd+B运行程序，确保代码包含pac…
-
深入理解Java中构造器与this引用的使用限制
本文旨在解析Java中在继承类构造器中使用this引用导致“Cannot reference ‘this’ before supertype constructor has been called”编译错误的原因。该错误源于Java对象初始化机制，即在调用父类构造器之前，子类…
-
36漫画免费入口极速登录首页 36漫画登录在线免费看高清
36漫画免费官网入口为https://www.36manhua.com/，该平台提供高清正版漫画资源，涵盖穿越、玄幻、热血等多种题材，支持在线阅读与离线缓存，具备智能分页、夜间模式等功能，并可设置更新提醒，收藏记录同步，确保用户流畅舒适的阅读体验。 36漫画免费入口极速登录首页在哪里？这是不少网友都…
-
Elser AI Comics支持哪些绘画风格？如何选择最适合的风格？
要选择最适合的elser ai comics绘画风格，首先需明确创作主题与受众，再结合各风格特点进行匹配。写实风适合现实题材，卡通风适合儿童或幽默内容，日漫风适合青春恋爱类故事，美式漫画风适用于超级英雄或科幻题材，水墨风则适合传统文化表达；其次可参考平台偏好并尝试生成样本图对比效果，必要时也可混合使…
-
sublime怎么快速切换两个不同的文件_文件快速切换操作方法
掌握Sublime Text快速切换文件需熟悉快捷键与技巧：1. Ctrl+P/Cmd+P打开“Go to Anything”模糊搜索文件；2. Ctrl+Tab循环切换标签页；3. Alt/Cmd+数字键切换指定标签；4. 侧边栏点击文件直接切换；5. Ctrl+Shift+R/Cmd+Shift…
-
Redhad 7改用CentOS7 yum源【亲测】
1、遇到问题 在RedHat系统中，默认的yum源需要注册到RedHat Subscription Management才能更新。为了避免花费，我们需要替换为国内的yum源。 2、解决办法 由于CentOS和RedHat系统非常相似，替换为CentOS的yum源是可行的，但过程中可能遇到一些挑战。以…
-
PCIe插槽分配策略：x16/x0/x4还是x8/x8/x4？
PCIe插槽拆分指将CPU提供的PCIe通道分配给多个插槽，常见模式有x16/x0/x4和x8/x8/x4。x16/x0/x4适合单显卡加高速NVMe存储，保障显卡满带宽运行，适用于主流游戏平台；x8/x8/x4则将第一、二插槽各分x8带宽，支持双GPU或多专业卡协同，适合视频编辑、AI训练等高性能…
-
SublimeText运行PowerShell脚本_ps1文件构建系统配置方法
首先创建自定义构建系统，在Sublime Text中添加调用PowerShell执行.ps1文件的配置，保存为PowerShell.sublime-build；接着以管理员身份运行PowerShell并执行Set-ExecutionPolicy RemoteSigned -Scope Current…
-
mac怎么用Apple Watch解锁_mac使用Apple Watch解锁方法
启用Apple Watch解锁Mac需在系统设置中开启相关选项，确保设备间蓝牙和iCloud连接正常；佩戴已解锁手表靠近Mac可自动登录，同时可用于批准密码请求；若功能异常，需检查设备兼容性、同一Apple ID登录及连续互通设置。 如果您在靠近Mac时希望快速解锁设备或批准系统请求，而无需反复输入…
-
调试PHP与MySQL数据库交互时的逻辑错误
调试php与mysql交互时的逻辑错误需要通过以下步骤：1. sql查询验证：在数据库客户端中运行查询，确保正确执行。2. 数据类型检查：确保php传递的数据类型与数据库字段匹配。3. php逻辑逐步调试：使用var_dump()或print_r()输出变量值。4. 使用事务管理数据一致性。5. 启…
-
vivoY系列摄像头设置怎么调以提升低光拍摄效果？低光模式的优化方法
要提升vivo Y系列低光拍摄效果，需开启夜景模式，利用多帧合成提亮降噪，配合曝光补偿微调（如-0.3至-0.7EV）避免过曝，保持手机稳定防模糊，必要时用HDR平衡光比，慎用闪光灯，优先使用屏幕补光或外部光源，开启AI场景识别辅助优化，手动对焦确保清晰，并保持镜头清洁；在支持专业模式的机型上，可降…
-
京东11.11跨店满减券怎么叠加使用_京东双十一跨店满减券叠加攻略
1、官方直降商品自动参与跨店满减，降价后价格计入满300减50；2、国家补贴需领资格，先扣补贴再享满减；3、京享红包最后抵扣，可叠加所有优惠，有效至11月14日23:59。 如果您在京东11.11期间选购多件商品，希望最大化优惠力度，则需要了解跨店满减券如何与其他优惠叠加使用。以下是具体操作方法和叠…
-
Sublime如何为不同项目配置不同运行环境_项目专属构建系统设置
通过创建项目专属构建系统并绑定到具体项目，可在Sublime中实现运行环境隔离。首先新建.sublime-build文件指定执行命令与参数，保存至项目目录或User包路径；随后在项目配置中添加build_systems字段引用该文件，使构建选项仅对该项目生效；进一步可在构建配置中设置env字段修改P…
-
最小化完成任务所需的时间：一种扫描线算法教程
本文介绍了一种使用扫描线算法解决任务调度问题的有效方法。该问题涉及一系列具有开始时间、结束时间和所需完成时间的任务。目标是找到完成所有任务所需的最小总时间，允许同时处理多个任务，且任务完成时间可以是不连续的。本文将详细解释该算法的逻辑，并提供相应的代码示例，帮助读者理解和应用该方法。 问题描述 给定…
