本文旨在解决在使用 jQuery 动态生成表格时，如何准确获取用户点击行中的特定数据。通过示例代码，详细讲解如何利用 $(e.target).closest(‘tr’).find() 方法，以及避免在动态生成的内容中使用重复 ID 的重要性，并提供使用 class 替代 ID 的解决方案，确保数据获取的准确性和代码的健壮性。
在使用 jQuery 处理动态生成的表格时，一个常见的问题是如何在点击事件中获取当前行的数据。 尤其是在每一行都包含相似的元素，但数据却各不相同的情况下，我们需要一种方法来精确定位到用户点击的行，并从中提取所需的信息。
问题分析
假设我们有一个动态生成的表格，每一行都有一个隐藏的
元素，其中包含唯一的 RecId。当用户点击某一行中的按钮时，我们希望获取该行的 RecId 并将其发送到服务器。
常见的错误做法是直接使用 $(‘#recid’).text()，因为这只会获取页面上第一个 ID 为 recid 的元素的内容。由于 ID 在 HTML 文档中应该是唯一的，这种方法在动态生成的内容中会失效。
解决方案
正确的做法是利用事件对象 e 来定位到触发事件的元素，然后向上查找最近的
元素，最后在该行中查找特定的 元素。
以下是修改后的 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).closest(‘tr’)：从触发事件的元素开始，向上查找最近的 元素，也就是包含按钮的行。find(‘#recid’)：在找到的行中，查找 ID 为 recid 的元素。.text()：获取该元素的文本内容。
重要提示：避免重复使用 ID
正如前面提到的，ID 在 HTML 文档中应该是唯一的。因此，在动态生成的表格中，为每一行都使用相同的 ID 是不正确的。
更好的做法：使用 Class 替代 ID
为了避免 ID 冲突，建议使用 class 来标识需要获取数据的元素。
首先，修改 HTML 代码，将 id=”recid” 替换为 class=”recid”：
然后，修改 JavaScript 代码，将 find(‘#recid’) 替换为 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;});
完整示例
以下是一个完整的示例，展示了如何使用 jQuery 动态获取表格行中的特定字符串：
动态表格示例
| RecId | 操作 |
|---|---|
| 123 | |
| 456 | |
| 789 |
总结
通过使用 $(e.target).closest(‘tr’).find(‘.recid’).text() 方法，我们可以准确地获取用户点击行中的 RecId。同时，使用 class 替代 ID 可以避免 ID 冲突，使代码更加健壮。在处理动态生成的 HTML 内容时，始终要记住使用 class 来标识可以重复出现的元素，并利用事件对象 e 来定位到特定的元素。 这将有助于编写更可靠、更易于维护的 jQuery 代码。
以上就是使用 jQuery 动态获取表格行中的特定字符串的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515166.html
微信扫一扫 
支付宝扫一扫 
