在前端业务开发中，表格是展示结构化数据的常用组件，很多时候需要把用户选中的表格行数据提交到服务器进行处理，比如批量删除、状态更新、数据同步等场景，使用jQuery可以快速实现这一需求。
基础表格结构准备
首先我们需要有一个基础的表格结构，为了方便演示，这里构建一个包含复选框、用户信息的表格，实际开发中可以根据业务需求调整表格列的内容：
<table id="userTable" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="checkAll">全选</th>
<th>用户ID</th>
<th>用户名称</th>
<th>用户年龄</th>
<th>用户状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1001</td>
<td>张三</td>
<td>25</td>
<td>正常</td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1002</td>
<td>李四</td>
<td>28</td>
<td>禁用</td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1003</td>
<td>王五</td>
<td>22</td>
<td>正常</td>
</tr>
</tbody>
</table>
<button id="submitBtn">提交选中数据</button>实现全选与单选联动逻辑
在获取行数据之前，通常需要先实现表格的全选和单选联动功能，这样用户可以方便地选中需要提交的行，相关jQuery实现代码如下：
$(function() {
// 全选复选框点击事件
$('#checkAll').on('click', function() {
// 让所有行的复选框状态和全选框保持一致
$('.rowCheck').prop('checked', $(this).prop('checked'));
});
// 单行复选框点击事件
$('.rowCheck').on('click', function() {
// 判断当前选中的行数是否等于总行数，更新全选框状态
let checkedCount = $('.rowCheck:checked').length;
let totalCount = $('.rowCheck').length;
$('#checkAll').prop('checked', checkedCount === totalCount);
});
});动态获取选中行的数据
完成选择逻辑后，就可以编写获取选中行数据的代码，我们需要遍历所有选中的行，提取每一行中单元格的文本内容，组装成结构化的数据：
function getSelectedRowData() {
let selectedData = [];
// 遍历所有选中的行
$('#userTable tbody tr').has('.rowCheck:checked').each(function() {
let row = $(this);
// 提取当前行各个单元格的内容，注意跳过第一个复选框列
let rowData = {
userId: row.find('td').eq(1).text().trim(),
userName: row.find('td').eq(2).text().trim(),
userAge: row.find('td').eq(3).text().trim(),
userStatus: row.find('td').eq(4).text().trim()
};
// 简单校验，跳过空数据行
if (rowData.userId) {
selectedData.push(rowData);
}
});
return selectedData;
}这里使用has('.rowCheck:checked')方法筛选出被选中的行，再通过eq()方法定位到对应索引的单元格，注意表格的td索引是从0开始的，第一个是复选框列，所以用户ID对应索引1，以此类推。如果单元格内有输入框等表单元素，可以把text()换成find('input').val()来获取输入值。
将数据发送到服务器
获取到结构化的行数据之后，就可以通过jQuery的$.ajax方法将数据发送到后端服务器，这里补充完整的提交逻辑，包含参数组装、请求发送和结果处理：
$(function() {
$('#submitBtn').on('click', function() {
let dataList = getSelectedRowData();
// 校验是否有选中的数据
if (dataList.length === 0) {
alert('请先选中需要提交的行数据');
return;
}
// 发送ajax请求到服务器
$.ajax({
url: 'https://api.ipipp.com/submitTableData', // 替换为实际的后端接口地址
type: 'POST',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify({
submitTime: new Date().getTime(),
dataList: dataList
}),
dataType: 'json',
success: function(res) {
if (res.code === 200) {
alert('数据提交成功，共提交' + dataList.length + '条数据');
// 提交成功后可以清空选中状态
$('#checkAll').prop('checked', false);
$('.rowCheck').prop('checked', false);
} else {
alert('提交失败：' + res.msg);
}
},
error: function(err) {
alert('请求服务器失败，请检查网络连接或接口地址');
console.log('请求错误信息：', err);
}
});
});
});开发注意事项
- 数据提取时要做好空值校验，避免出现空字符串或者undefined提交到服务器，影响接口处理逻辑。
- 如果表格数据是动态加载的，需要把事件绑定换成事件委托的方式，比如
$(document).on('click', '.rowCheck', function() { ... })，避免动态添加的行无法触发点击事件。 - 发送请求前可以根据后端接口的要求转换数据格式，比如年龄字段如果是数字类型，可以用
parseInt(rowData.userAge)做转换再提交。 - 如果提交的数据量较大，可以考虑做分批提交处理，避免单次请求数据过大导致超时。
完整代码示例
将上述逻辑整合后，完整的可运行代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery获取表格行数据提交示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="userTable" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="checkAll">全选</th>
<th>用户ID</th>
<th>用户名称</th>
<th>用户年龄</th>
<th>用户状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1001</td>
<td>张三</td>
<td>25</td>
<td>正常</td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1002</td>
<td>李四</td>
<td>28</td>
<td>禁用</td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheck"></td>
<td>1003</td>
<td>王五</td>
<td>22</td>
<td>正常</td>
</tr>
</tbody>
</table>
<button id="submitBtn">提交选中数据</button>
<script>
$(function() {
// 全选逻辑
$('#checkAll').on('click', function() {
$('.rowCheck').prop('checked', $(this).prop('checked'));
});
// 单选联动全选
$('.rowCheck').on('click', function() {
let checkedCount = $('.rowCheck:checked').length;
let totalCount = $('.rowCheck').length;
$('#checkAll').prop('checked', checkedCount === totalCount);
});
// 获取选中行数据
function getSelectedRowData() {
let selectedData = [];
$('#userTable tbody tr').has('.rowCheck:checked').each(function() {
let row = $(this);
let rowData = {
userId: row.find('td').eq(1).text().trim(),
userName: row.find('td').eq(2).text().trim(),
userAge: row.find('td').eq(3).text().trim(),
userStatus: row.find('td').eq(4).text().trim()
};
if (rowData.userId) {
selectedData.push(rowData);
}
});
return selectedData;
}
// 提交数据
$('#submitBtn').on('click', function() {
let dataList = getSelectedRowData();
if (dataList.length === 0) {
alert('请先选中需要提交的行数据');
return;
}
$.ajax({
url: 'https://api.ipipp.com/submitTableData',
type: 'POST',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify({
submitTime: new Date().getTime(),
dataList: dataList
}),
dataType: 'json',
success: function(res) {
if (res.code === 200) {
alert('数据提交成功，共提交' + dataList.length + '条数据');
$('#checkAll').prop('checked', false);
$('.rowCheck').prop('checked', false);
} else {
alert('提交失败：' + res.msg);
}
},
error: function(err) {
alert('请求服务器失败，请检查网络连接或接口地址');
console.log('请求错误信息：', err);
}
});
});
});
</script>
</body>
</html>