本文将介绍如何在使用 jQuery 动态生成的 HTML 表格中，点击按钮获取特定行的数据，并通过 AJAX 方法发送到服务器。核心在于如何准确地定位到触发事件的表格行，并从中提取所需的数据。
在动态生成的表格中，经常需要根据用户的操作，将特定行的数据发送到服务器进行处理。例如，在一个订单管理系统中，用户点击“开始工作”按钮后，需要将该订单的 ID 发送到服务器，以便服务器更新订单状态。以下将详细介绍如何实现这一功能。
HTML 结构
假设我们有如下的 HTML 表格结构，其中表格行是动态生成的：
| ID | 操作 |
|---|---|
| 123 |
|
| 456 |
|
注意，这里我们使用了 class recid 而不是 id recid 来存储每一行的 ID。这是因为在 HTML 文档中，ID 应该是唯一的。如果使用 ID，jQuery 选择器 $('#recid') 总是会返回第一个匹配的元素，导致所有行都获取到相同的值。
jQuery 代码
为了获取点击按钮所在行的 ID，可以使用以下 jQuery 代码：
一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业
$("#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 的解决方案。通过本文的学习，可以掌握在动态表格中获取数据并发送到服务器的常用技巧。
