投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

如何为表格的每一行创建一个接受按钮？

程序猿 • • 好文分享 • 阅读 0

如何为表格的每一行创建一个接受按钮？

本文旨在解决在动态生成的html表格中，为每一行添加一个“接受”按钮，并实现点击该按钮后显示特定列，隐藏其他列的功能。重点在于避免使用重复id，并利用jquery选择器精准控制每一行元素的显示与隐藏，确保表格交互的正确性与可维护性。

在Web开发中，经常会遇到需要动态生成表格，并且为每一行添加交互功能的需求。一个常见的场景是，表格中包含一个“接受”按钮，点击该按钮后，需要显示该行的一些操作选项，同时隐藏一些初始状态下的元素。本文将详细介绍如何使用HTML、PHP和JavaScript（jQuery）来实现这一功能，并着重强调避免使用重复ID，以及如何使用jQuery选择器来正确操作DOM元素。

问题分析与解决方案

原始代码中存在一个关键问题：在循环中使用了相同的ID（refuseAccept和showOptions）多次，这违反了HTML规范，导致JavaScript代码只能操作第一个匹配该ID的元素，从而使得只有表格的第一行“接受”按钮有效。

为了解决这个问题，我们需要：

避免使用重复ID：将ID改为class，例如refuseAccept改为.refuseAccept，showOptions改为.showOptions。使用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}                                                                                                                                           ";    }    ?>

JavaScript (jQuery)

$(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)

.showOptions {  display: none;}

代码解释

HTML/PHP: 将refuseAccept和showOptions的id改为了class。同时，将.showOptions的初始状态设置为display:none;，确保初始状态下操作选项是隐藏的。JavaScript: 使用$(document).on(‘click’, ‘.acceptPpomentDoc’, function() { … });来监听acceptPpomentDoc类的点击事件。$(document).on() 适用于动态添加的元素。$(this)指向当前点击的“接受”按钮。$(this).closest(‘tr’) 找到该按钮最近的父级元素，也就是当前行。$(this).closest(‘tr’).find(‘.showOptions’) 在当前行内查找class为showOptions的元素。.show() 和 .hide() 方法分别用于显示和隐藏元素。CSS: 使用CSS来控制.showOptions的初始显示状态，确保页面加载时操作选项是隐藏的。

注意事项

jQuery库: 确保你的页面已经引入了jQuery库。 可以使用CDN链接： 事件委托: 使用$(document).on()进行事件委托，可以确保即使是动态添加的元素也能正确响应点击事件。选择器: 理解jQuery选择器的用法至关重要。.closest() 用于查找祖先元素，.find() 用于查找后代元素。错误处理: 在实际开发中，建议添加适当的错误处理机制，例如检查元素是否存在，避免出现JavaScript错误。

总结

通过避免使用重复ID，并结合jQuery选择器，我们可以轻松地为动态生成的表格添加交互功能。本文提供了一个清晰的示例，展示了如何为表格的每一行添加一个“接受”按钮，并实现点击该按钮后显示特定列，隐藏其他列的功能。 这种方法不仅解决了原始代码中的问题，还提高了代码的可维护性和可扩展性。

以上就是如何为表格的每一行创建一个接受按钮？的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327604.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

309.5K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月12日 13:55:18
下一篇 2025年12月12日 13:55:31

相关推荐

发表回复

登录后才能评论
关注微信