使用 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 代码：

$("#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’) 用于找到按钮所在的最近的

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

注意事项

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

总结

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