本文旨在解决在使用 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
正如前面提到的，ID 在 HTML 文档中应该是唯一的。因此，在动态生成的表格中，为每一行都使用相同的 ID 是不正确的。
更好的做法：使用 Class 替代 ID
为了避免 ID 冲突，建议使用 class 来标识需要获取数据的元素。
首先，修改 HTML 代码，将 id=”recid” 替换为 class=”recid”：
<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>
然后，修改 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 动态获取表格行中的特定字符串：
<!DOCTYPE html> <html> <head> <title>动态表格示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="position-order"> <thead> <tr> <th>RecId</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td class="recid d-none">123</td> <td><button class="towork">获取 RecId</button></td> </tr> <tr> <td class="recid d-none">456</td> <td><button class="towork">获取 RecId</button></td> </tr> <tr> <td class="recid d-none">789</td> <td><button class="towork">获取 RecId</button></td> </tr> </tbody> </table> <script> $("#position-order tbody").on('click', '.towork', function gotowork(e){ const recid = $(e.target).closest('tr').find('.recid').text(); alert("RecId: " + recid); // 这里替换为你的 AJAX 请求 return false; }); </script> </body> </html>总结
通过使用 $(e.target).closest(‘tr’).find(‘.recid’).text() 方法，我们可以准确地获取用户点击行中的 RecId。同时，使用 class 替代 ID 可以避免 ID 冲突，使代码更加健壮。在处理动态生成的 HTML 内容时，始终要记住使用 class 来标识可以重复出现的元素，并利用事件对象 e 来定位到特定的元素。 这将有助于编写更可靠、更易于维护的 jQuery 代码。
评论（已关闭）
评论已关闭