如何使用JavaScript将HTML表格数据解析为目标JSON数组

实现代码 #

直接使用以下代码即可得到符合要求的结果：

const result = [];
const detailTables = document.querySelectorAll('table.mydetails');

detailTables.forEach(table => {
  const currentItem = {};
  const tds = table.querySelectorAll('td');
  // 提取日期字段
  currentItem.date = tds[0].textContent.trim();
  // 提取其余三个业务字段
  tds.forEach((td, index) => {
    if (index === 0) return;
    // 匹配字段名，兼容示例中第二行第四个td类名写错的情况
    let fieldKey = '';
    if (td.classList.contains('Target')) fieldKey = 'Target';
    if (td.classList.contains('Mine')) fieldKey = 'Mine';
    if (td.classList.contains('His') || td.classList.contains('Hi')) fieldKey = 'His';
    // 提取div内的文本
    currentItem[fieldKey] = td.querySelector('div').textContent.trim();
  })
  result.push(currentItem);
})

// 输出格式化后的JSON
console.log(JSON.stringify(result, null, 2));

逻辑说明 #

1. 先初始化空数组存储最终的JSON数据
2. 遍历所有table.mydetails标签，每个标签对应结果数组中的一个对象
3. 每个表格的第一个td内容直接作为date字段值
4. 剩余三个td根据类名匹配Target/Mine/His三个字段，取td内部div的文本作为对应字段值
5. 最后调用JSON.stringify格式化输出，运行后控制台打印的内容就是你需要的JSON结构

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