本文旨在解决在动态生成的 HTML 表格中，通过点击按钮获取特定行 RecId 并将其发送到服务器的问题。通过 jQuery 事件委托和 DOM 遍历，我们可以准确地获取到目标 RecId，并使用 AJAX 将其传递给服务器端的 PHP 脚本。本文将详细介绍如何实现这一功能，并提供代码示例和注意事项。
问题分析
在动态生成的表格中，为每个行都使用相同的 ID 是一个常见的问题。因为 ID 在 HTML 文档中必须是唯一的。 当使用$(‘#recid’).text()时，jQuery 选择器只会返回第一个匹配的元素，导致所有行都获取到第一个 recid 的值。 解决此问题的关键在于使用正确的 DOM 遍历方法，从点击的按钮开始，找到其所在的行，然后从该行中找到对应的 recid 元素。
解决方案
以下是解决此问题的步骤和代码示例：
修改 HTML 结构：
由于 ID 应该在 HTML 文档中是唯一的，因此应该将 recid 的 ID 修改为 class。
修改 JavaScript 代码：
使用 jQuery 的 closest() 和 find() 方法来定位到正确的 recid 元素。
$("#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;});
代码解释：
$(“#position-order tbody”).on(‘click’, ‘.towork’, function(e){ … });： 这段代码使用事件委托，监听 position-order 表格 tbody 中所有 class 为 towork 的按钮的点击事件。e.target： e.target 指的是触发事件的元素，也就是被点击的按钮。$(e.target).closest(‘tr’)： closest(‘tr’) 方法从被点击的按钮开始，向上查找最近的 元素，也就是按钮所在的表格行。find(‘.recid’)： find(‘.recid’) 方法在找到的表格行中查找 class 为 recid 的元素。.text()： text() 方法获取 recid 元素的文本内容。PHP 代码（/towork.php）：
在服务器端的 PHP 脚本中，接收并处理传递过来的 recid 值。
完整代码示例
HTML:
| 123 | |
| 456 | |
JavaScript:
$(document).ready(function() { $("#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}, success: function(response) { console.log(response); // 在控制台显示来自服务器的响应 } }); return false; });});
注意事项
错误处理： 在 AJAX 请求中添加错误处理，以便在请求失败时能够及时发现问题。数据验证： 在服务器端对接收到的 recid 值进行验证，确保数据的安全性。性能优化： 如果表格数据量很大，可以考虑使用更高效的 DOM 遍历方法，或者使用事件委托来减少事件监听器的数量。安全性： 确保对发送到服务器的数据进行适当的编码，以防止跨站脚本攻击 (XSS)。
总结
通过使用 jQuery 的 closest() 和 find() 方法，我们可以轻松地在动态生成的表格行中获取到特定的数据。 记住，ID 在 HTML 文档中必须是唯一的，因此应该使用 class 来代替 ID。 此外，为了提高代码的可维护性和可读性，建议将代码封装成函数，并添加适当的注释。
以上就是如何在动态生成的表格行中获取特定字符串并发送到服务器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515260.html
微信扫一扫 
支付宝扫一扫 
