本文旨在帮助开发者解决在动态生成的表格行中，通过点击按钮获取特定行数据时遇到的 recid 获取错误问题。我们将深入探讨如何利用 JavaScript 和 jQuery 准确地定位并提取所需数据，并强调使用 class 代替重复 id 的重要性，以确保代码的健壮性和可维护性。
在动态生成的表格中，如果每个
元素内部都有一个 元素使用相同的 id（例如 recid），那么使用 $(‘#recid’).text() 获取到的永远是第一个匹配的元素的值。这是因为 id 在 HTML 文档中必须是唯一的。为了解决这个问题，我们需要使用更精确的方法来定位目标 元素。
1. 使用 class 代替重复的 id
首先，将
元素的 id=”recid” 更改为 class=”recid”。 这样可以避免 id 重复的问题，并允许我们使用 jQuery 选择器更准确地定位元素。
立即学习“Java免费学习笔记（深入）”；
2. 精确定位目标元素
在 JavaScript 中，我们需要修改事件处理函数，以便能够找到与触发事件的按钮相关联的
元素，并从中提取 recid 的值。
以下是修改后的 JavaScript 代码：
$("#position-order tbody").on('click', '.towork', function gotowork(e){ const recid = $(e.target).closest('tr').find('.recid').text(); $.ajax({ type: "POST", url: '/towork.php', data: {recid: recid} }); return false;});
代码解释：
e.target: e.target 指的是触发事件的 DOM 元素，这里是点击的按钮。$(e.target).closest(‘tr’): closest(‘tr’) 方法从触发事件的元素开始，向上查找最近的 父元素。.find(‘.recid’): find(‘.recid’) 方法在找到的 元素内部查找 class 为 recid 的元素。.text(): text() 方法获取找到的 元素的文本内容，即 recid 的值。
3. 完整示例
将以上 HTML 和 JavaScript 代码整合在一起，形成一个完整的示例：
动态表格数据获取 .d-none { display: none; }
| 123 | |
| 456 | |
注意事项：
确保 jQuery 库已正确引入。使用 console.log() 调试输出 recid 的值，以验证代码是否正常工作。在实际应用中，请替换示例中的 console.log() 为实际的 AJAX 请求。如果表格是动态生成的，确保事件绑定在表格生成之后进行。
总结：
通过使用 class 代替重复的 id，并结合 jQuery 的 closest() 和 find() 方法，我们可以准确地获取动态生成的表格行中的特定数据。 这种方法不仅解决了 id 重复的问题，还提高了代码的可维护性和可读性。 在处理动态生成的 HTML 元素时，始终要记住避免使用重复的 id，并选择最合适的选择器来定位目标元素。
以上就是获取动态生成字符串：JavaScript 中获取特定行数据的正确方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515213.html
微信扫一扫 
支付宝扫一扫 
