如何用JavaScript提取所有表格tbody中td内容并转为指定JSON格式

我明白你现在的困扰——DOM操作刚上手的时候确实容易卡在批量提取和结构转换上，尤其是要生成这种多层嵌套的JSON。别担心，我给你写一个动态的函数，只要你的表格结构和目标JSON的层级对应，就能自动生成你要的格式。

首先得明确一下你的HTML表格结构——我假设你的表格是按「郡 → 作者 → 书籍信息」的层级来排列列的，比如每一行的td依次对应：郡（County）、作者（Author）、书名（Book Name）、价格（Price）等等。如果你的列顺序不一样，后面稍微调整一下索引就行。

下面是完整的函数代码，我会一步步给你解释：

function tableToNestedJSON() {
  // 1. 获取表格的tbody元素（如果有多个表格，可以给表格加id，用document.getElementById('your-table-id').querySelector('tbody')）
  const tbody = document.querySelector('table tbody');
  if (!tbody) {
    console.error('找不到表格tbody元素');
    return null;
  }

  // 2. 初始化最终的结果结构——修正了你给出的格式：数组里不能直接放键值对，用外层对象包裹更符合JSON规范
  const result = { Counties: {} };

  // 3. 获取tbody里的所有行
  const rows = tbody.querySelectorAll('tr');

  // 4. 遍历每一行
  rows.forEach(row => {
    // 获取当前行的所有td单元格
    const cells = row.querySelectorAll('td');
    // 确保当前行有足够的单元格（至少4个：County, Author, BookName, Price）
    if (cells.length < 4) return;

    // 提取每个单元格的内容，trim()去掉前后空格
    const county = cells[0].textContent.trim();
    const authorName = cells[1].textContent.trim();
    const bookName = cells[2].textContent.trim();
    const bookPrice = parseFloat(cells[3].textContent.trim());

    // 5. 逐层构建嵌套结构
    // 如果当前郡还没在Counties里，先创建空对象
    if (!result.Counties[county]) {
      result.Counties[county] = { Authors: {} };
    }

    // 如果当前作者还没在对应郡的Authors里，先创建空对象，包含Books数组
    if (!result.Counties[county].Authors[authorName]) {
      result.Counties[county].Authors[authorName] = { Books: [] };
    }

    // 把当前书籍信息添加到对应作者的Books数组里
    result.Counties[county].Authors[authorName].Books.push({
      name: bookName,
      price: bookPrice,
      // 如果还有其他字段，比如出版日期，就继续在这里添加：publishDate: cells[4].textContent.trim()
    });
  });

  // 6. 把结果转成JSON字符串，缩进2格方便阅读
  const jsonString = JSON.stringify(result, null, 2);
  console.log(jsonString);
  return jsonString;
}

// 调用函数
tableToNestedJSON();

关键步骤说明： #

• 精准定位tbody：用document.querySelector('table tbody')可以快速找到表格主体；如果页面有多个表格，给目标表格加个id（比如<table id="book-table">），再用document.getElementById('book-table').querySelector('tbody')就能精准获取。
• 结构修正：你原来给出的[ Counties: { ... } ]不符合JSON规范（数组只能存值，不能存键值对），所以改成了外层对象{ Counties: { ... } }；如果一定要数组包裹，最后把结果改成[result]就行，但更推荐用对象结构。
• 动态层级构建：通过条件判断检查当前层级的对象是否存在，不存在就先创建，再把书籍信息推入对应数组，这样能自动完成分组，不会重复创建郡或作者的结构。
• 灵活调整：如果表格列顺序不同（比如价格在第5列），把cells[3]改成cells[4]即可；有其他字段的话，在push时添加对应键值对就行。

测试效果 #

如果你的表格是我假设的结构，运行函数后控制台会输出类似这样的JSON：

{
  "Counties": {
    "England": {
      "Authors": {
        "Author A": {
          "Books": [
            {
              "name": "Book A",
              "price": 10
            },
            {
              "name": "Book B",
              "price": 15
            }
          ]
        }
      }
    },
    "Scotland": {
      "Authors": {
        "Author B": {
          "Books": [
            {
              "name": "Book C",
              "price": 12
            }
          ]
        }
      }
    }
  }
}

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