使用 jQuery 动态获取表格行中的特定字符串-js教程-PHP中文网

使用 jQuery 动态获取表格行中的特定字符串

心靈之曲

发布： 2025-08-14 17:08:24

原创

982人浏览过

使用 jquery 动态获取表格行中的特定字符串

本文旨在解决在使用 jQuery 动态生成表格时，如何准确获取用户点击行中的特定数据。通过示例代码，详细讲解如何利用 $(e.target).closest('tr').find() 方法，以及避免在动态生成的内容中使用重复 ID 的重要性，并提供使用 class 替代 ID 的解决方案，确保数据获取的准确性和代码的健壮性。

在使用 jQuery 处理动态生成的表格时，一个常见的问题是如何在点击事件中获取当前行的数据。尤其是在每一行都包含相似的元素，但数据却各不相同的情况下，我们需要一种方法来精确定位到用户点击的行，并从中提取所需的信息。

问题分析

假设我们有一个动态生成的表格，每一行都有一个隐藏的 <td> 元素，其中包含唯一的 RecId。当用户点击某一行中的按钮时，我们希望获取该行的 RecId 并将其发送到服务器。

常见的错误做法是直接使用 $('#recid').text()，因为这只会获取页面上第一个 ID 为 recid 的元素的内容。由于 ID 在 HTML 文档中应该是唯一的，这种方法在动态生成的内容中会失效。

解决方案

正确的做法是利用事件对象 e 来定位到触发事件的元素，然后向上查找最近的 <tr> 元素，最后在该行中查找特定的 <td> 元素。

以下是修改后的 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')：从触发事件的元素开始，向上查找最近的 <tr> 元素，也就是包含按钮的行。
find('#recid')：在找到的行中，查找 ID 为 recid 的元素。
.text()：获取该元素的文本内容。

重要提示：避免重复使用 ID

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

正如前面提到的，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">&#9998;</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 代码。

以上就是使用 jQuery 动态获取表格行中的特定字符串的详细内容，更多请关注php中文网其它相关文章！