本文旨在解决在使用 jQuery 动态生成表格时，如何准确获取用户点击行中的特定数据。通过示例代码，详细讲解如何利用 $(e.target).closest('tr').find() 方法，以及避免在动态生成的内容中使用重复 ID 的重要性，并提供使用 class 替代 ID 的解决方案，确保数据获取的准确性和代码的健壮性。
在使用 jQuery 处理动态生成的表格时，一个常见的问题是如何在点击事件中获取当前行的数据。 尤其是在每一行都包含相似的元素，但数据却各不相同的情况下，我们需要一种方法来精确定位到用户点击的行，并从中提取所需的信息。
问题分析
假设我们有一个动态生成的表格，每一行都有一个隐藏的
常见的错误做法是直接使用 $('#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
佳蓝在线销售系统(创业版) 佳蓝在线销售下载1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全
正如前面提到的，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 代码。
