本文旨在帮助开发者解决在动态生成的表格行中，通过点击按钮获取特定行数据时遇到的 recid 获取错误问题。我们将深入探讨如何利用 JavaScript 和 jQuery 准确地定位并提取所需数据，并强调使用 class 代替重复 id 的重要性，以确保代码的健壮性和可维护性。
在动态生成的表格中，如果每个 <tr> 元素内部都有一个 <td> 元素使用相同的 id（例如 recid），那么使用 $('#recid').text() 获取到的永远是第一个匹配的元素的值。这是因为 id 在 HTML 文档中必须是唯一的。为了解决这个问题，我们需要使用更精确的方法来定位目标 <td> 元素。
1. 使用 class 代替重复的 id
首先，将 <td> 元素的 id="recid" 更改为 class="recid"。 这样可以避免 id 重复的问题，并允许我们使用 jQuery 选择器更准确地定位元素。
立即学习“Java免费学习笔记（深入）”；
<tr class="ordertr table-bordered"> <td class="recid d-none"><?=$row['RecId']?></td> <td class="ps-lg-3"> <ul> <li><button id="editingST">✎</button></li> <li><button class="towork">?</button></li> </ul> </td> </tr>
2. 精确定位目标元素
在 JavaScript 中，我们需要修改事件处理函数，以便能够找到与触发事件的按钮相关联的 <tr> 元素，并从中提取 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') 方法从触发事件的元素开始，向上查找最近的 <tr> 父元素。
- .find('.recid'): find('.recid') 方法在找到的 <tr> 元素内部查找 class 为 recid 的元素。
- .text(): text() 方法获取找到的 <td> 元素的文本内容，即 recid 的值。
3. 完整示例
将以上 HTML 和 JavaScript 代码整合在一起，形成一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>动态表格数据获取</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.d-none {
display: none;
}
</style>
</head>
<body>
<table id="position-order">
<tbody>
<tr class="ordertr table-bordered">
<td class="recid d-none">123</td>
<td class="ps-lg-3">
<ul>
<li><button id="editingST">✎</button></li>
<li><button class="towork">?</button></li>
</ul>
</td>
</tr>
<tr class="ordertr table-bordered">
<td class="recid d-none">456</td>
<td class="ps-lg-3">
<ul>
<li><button id="editingST">✎</button></li>
<li><button class="towork">?</button></li>
</ul>
</td>
</tr>
</tbody>
</table>
<script>
$("#position-order tbody").on('click', '.towork', function gotowork(e){
const recid = $(e.target).closest('tr').find('.recid').text();
console.log("recid: " + recid); // 调试输出
// $.ajax({
// type: "POST",
// url: '/towork.php',
// data: {recid: recid}
// });
return false;
});
</script>
</body>
</html>注意事项：
- 确保 jQuery 库已正确引入。
- 使用 console.log() 调试输出 recid 的值，以验证代码是否正常工作。
- 在实际应用中，请替换示例中的 console.log() 为实际的 AJAX 请求。
- 如果表格是动态生成的，确保事件绑定在表格生成之后进行。
总结：
通过使用 class 代替重复的 id，并结合 jQuery 的 closest() 和 find() 方法，我们可以准确地获取动态生成的表格行中的特定数据。 这种方法不仅解决了 id 重复的问题，还提高了代码的可维护性和可读性。 在处理动态生成的 HTML 元素时，始终要记住避免使用重复的 id，并选择最合适的选择器来定位目标元素。
