如何用jQuery将含rowspan与单选框的HTML表格转为指定JSON

我来帮你搞定这个需求！下面是完全匹配你要求的jQuery实现方案，直接就能用：

实现代码 #

$(document).ready(function() {
  $('#convert06Phy').click(function() {
    var data = [];
    // 遍历每个数据分组（每个分组以带rowspan="3"的单元格的行为起始）
    $('table tr:has(td[rowspan="3"])').each(function() {
      const groupStartRow = $(this);
      // 获取选中的单选框值（对应Data1）
      const data1 = parseInt(groupStartRow.find('input[type="radio"]:checked').val());
      // 获取合并单元格的Data2和Data6值
      const data2 = parseInt(groupStartRow.find('td:eq(1)').text().trim());
      const data6 = parseInt(groupStartRow.find('td:eq(5)').text().trim());
      
      // 初始化Data3、Data4、Data5的数组
      const data3 = [], data4 = [], data5 = [];
      // 遍历分组内的3行数据
      for(let i = 0; i < 3; i++) {
        const currentRow = $('table tr').eq(groupStartRow.index() + i);
        data3.push(parseInt(currentRow.find('td:eq(2)').text().trim()));
        data4.push(parseInt(currentRow.find('td:eq(3)').text().trim()));
        data5.push(parseInt(currentRow.find('td:eq(4)').text().trim()));
      }
      
      // 将当前分组数据加入结果数组
      data.push({
        Data1: data1,
        Data2: data2,
        Data3: data3,
        Data4: data4,
        Data5: data5,
        Data6: data6
      });
    });
    
    // 输出结果到控制台，你也可以根据需求做其他处理（比如赋值给全局变量）
    console.log(JSON.stringify(data, null, 2));
    window.data = data; // 若需要全局变量data，保留这行
  });
});

关键逻辑说明 #

• 分组定位：通过tr:has(td[rowspan="3"])精准定位每个数据分组的起始行，因为你的表格每个分组的第一行都包含跨3行的单元格，这是天然的分组标识。
• 单选值处理：直接从分组起始行中筛选出选中的单选按钮，获取其value并转为数字，完全匹配你要求的0对应Option1、1对应Option2的规则。
• 合并单元格取值：Data2和Data6是跨3行的合并单元格，直接从分组起始行的对应列（索引1和5）获取文本即可，无需遍历多行。
• 多行数据收集：每个分组包含3行数据，从起始行索引开始遍历后续2行，分别收集Data3、Data4、Data5的三个值，组装成数组。
• 类型转换：用parseInt把表格中的文本内容转为数字类型，和你提供的JSON示例中的数据类型保持一致。

注意事项 #

• 确保你的页面已经加载了jQuery库（可以通过本地引入或者CDN，只要能正常使用jQuery语法即可）。
• 如果后续表格的分组行数有变化，只需要调整循环中的3为对应的行数即可。

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