使用jQuery将表格选中行转为以表头为索引的数组

没问题，这需求在项目里挺常见的，我给你整理了一套直接能用的实现方案：

核心思路拆解 #

1. 先提取表头的有效列名（跳过第一列的复选框列），作为数组内每个对象的键
2. 精准筛选出被勾选的数据行，把每行的单元格内容和表头键一一对应，生成结构化对象
3. 将所有符合条件的对象收集到目标数组中

完整可运行代码 #

// 先获取表头的列名（排除第一列的复选框列）
const tableHeaders = $('#checkTable thead th').not(':first').map(function() {
  return $(this).text().trim();
}).get();

// 封装成函数，方便随时调用获取选中行数据
function getCheckedRowsData() {
  const selectedRowsArray = [];
  
  // 遍历tbody中带有选中复选框的数据行
  $('#checkTable tbody tr').has('input[type="checkbox"]:checked').each(function() {
    const rowObj = {};
    // 遍历当前行的单元格（跳过第一列复选框），对应表头生成键值对
    $(this).find('td').not(':first').each(function(index) {
      rowObj[tableHeaders[index]] = $(this).text().trim();
    });
    selectedRowsArray.push(rowObj);
  });
  
  return selectedRowsArray;
}

// 示例：绑定按钮点击事件获取数据
$('#getSelectedDataBtn').click(function() {
  const result = getCheckedRowsData();
  console.log('选中行数据：', result);
  // 这里可以添加后续逻辑，比如提交到后端、渲染到页面等
});

关键细节说明 #

• not(':first')：专门跳过第一列的复选框列，确保只提取业务相关的表头文本
• has('input[type="checkbox"]:checked')：精准定位选中行，不会误触表头的全选复选框
• trim()：去除单元格文本前后的空白字符，避免数据里混入不必要的空格
• 封装成函数getCheckedRowsData()：方便在不同场景下重复调用，比如提交表单前校验、批量操作时获取数据

额外补充：全选/反选联动逻辑 #

如果你的全选按钮#checkAll需要和行内复选框联动，可以加上这段代码：

$('#checkAll').click(function() {
  const isAllChecked = $(this).is(':checked');
  $('#checkTable tbody input[type="checkbox"]').prop('checked', isAllChecked);
});

点击全选按钮时，所有数据行的复选框会同步选中/取消，体验更流畅。

内容的提问来源于stack exchange，提问作者Alesh