使用 jQuery 动态获取表格行数据并发送到服务器

本文将介绍如何在使用 jQuery 动态生成的 HTML 表格中，点击按钮获取特定行的数据，并通过 AJAX 方法发送到服务器。核心在于如何准确地定位到触发事件的表格行，并从中提取所需的数据。

在动态生成的表格中，经常需要根据用户的操作，将特定行的数据发送到服务器进行处理。例如，在一个订单管理系统中，用户点击“开始工作”按钮后，需要将该订单的 ID 发送到服务器，以便服务器更新订单状态。以下将详细介绍如何实现这一功能。

HTML 结构

假设我们有如下的 HTML 表格结构，其中表格行是动态生成的：

<table id="position-order">
  <thead>
    <tr>
      <th>ID</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ordertr table-bordered">
      <td class="recid d-none">123</td>
      <td class="ps-lg-3">
        <ul>
          <li><button id="editingST">&#9998;</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">&#9998;</button></li>
          <li><button class="towork">?</button></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

注意，这里我们使用了 class recid 而不是 id recid 来存储每一行的 ID。这是因为在 HTML 文档中，ID 应该是唯一的。如果使用 ID，jQuery 选择器 $('#recid') 总是会返回第一个匹配的元素，导致所有行都获取到相同的值。

jQuery 代码

为了获取点击按钮所在行的 ID，可以使用以下 jQuery 代码：

飞书多维表格

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

26

查看详情

$("#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;
});

这段代码使用了事件委托（event delegation）的方式，将点击事件绑定到 tbody 元素上。当点击 tbody 内的任何 .towork 按钮时，gotowork 函数会被执行。

在 gotowork 函数中，e.target 指的是触发事件的元素，也就是被点击的按钮。$(e.target).closest('tr') 用于找到按钮所在的最近的 <tr> 元素。然后，.find('.recid') 在该行内查找 class 为 recid 的 <td> 元素，并使用 .text() 方法获取其文本内容，即我们需要的 ID 值。

最后，使用 $.ajax() 方法将 ID 发送到服务器。

注意事项

• ID 的唯一性： 在 HTML 文档中，ID 必须是唯一的。如果使用 ID，jQuery 选择器 $('#recid') 总是会返回第一个匹配的元素。应该使用 class 代替 ID。
• 事件委托： 使用事件委托可以将事件绑定到父元素上，避免为每个动态生成的元素都绑定事件。这可以提高性能，并简化代码。
• 数据验证： 在将数据发送到服务器之前，应该进行验证，确保数据的有效性。
• 错误处理： 在 AJAX 请求中，应该添加错误处理逻辑，以便在请求失败时进行相应的处理。

总结

本文介绍了如何在使用 jQuery 动态生成的 HTML 表格中，点击按钮获取特定行的数据，并通过 AJAX 方法发送到服务器。关键在于正确地定位到触发事件的表格行，并从中提取所需的数据。同时，强调了在 HTML 文档中使用唯一 ID 的重要性，并提出了使用 class 代替 ID 的解决方案。通过本文的学习，可以掌握在动态表格中获取数据并发送到服务器的常用技巧。

以上就是使用 jQuery 动态获取表格行数据并发送到服务器的详细内容，更多请关注php中文网其它相关文章！