如何将行列值规范的结构化数据输出至控制台或JSON？附示例表格代码

看起来你已经搭建好带可编辑列标题和单元格的表格，还有保存按钮——我来帮你实现点击保存时提取数据并输出的功能，直接上代码和实用解释：

第一步：确保HTML元素类名统一 #

先确认你的表格结构满足以下要求（你已经有了基础结构，只需补充单元格类名）：

• 列标题的输入框保留column_data类
• 每个内容单元格的输入框添加cell_data类（方便我们精准抓取内容）

简化后的HTML参考：

<button type="button" class="btn btn-danger" id="saveTable">Save table</button>
<table id="table-data" class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th></th>
      <th>
        <button type="button" class="btn btn-primary removeColumn btn-block">Delete column</button>
        <br>
        <input class="form-control column_data" type="text" autofocus placeholder="Title" name="Name" value="Titolo">
      </th>
      <!-- 其他列重复此结构 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><!-- 行操作按钮 --></td>
      <td><input class="form-control cell_data" type="text" placeholder="Cell value"></td>
      <!-- 其他单元格对应列 -->
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

第二步：编写JavaScript逻辑 #

把这段代码放在HTML底部（或单独的JS文件中），它会监听保存按钮的点击事件，完成数据提取和输出：

// 获取核心元素
const saveBtn = document.getElementById('saveTable');
const table = document.getElementById('table-data');

// 绑定保存按钮点击事件
saveBtn.addEventListener('click', function() {
  // 1. 提取有效列标题（过滤空标题）
  const columnTitles = Array.from(table.querySelectorAll('thead .column_data'))
    .map(input => input.value.trim())
    .filter(title => title);

  // 2. 提取每一行的结构化数据
  const tableData = Array.from(table.querySelectorAll('tbody tr'))
    .map(row => {
      // 获取当前行所有单元格的值
      const cellValues = Array.from(row.querySelectorAll('.cell_data'))
        .map(input => input.value.trim());
      
      // 将标题与单元格值配对成键值对对象
      return columnTitles.reduce((rowObj, title, index) => {
        rowObj[title] = cellValues[index] || '';
        return rowObj;
      }, {});
    });

  // 3. 输出到浏览器控制台
  console.log('表格结构化数据:', tableData);

  // 4. 转换为格式化的JSON字符串
  const jsonOutput = JSON.stringify(tableData, null, 2);
  console.log('JSON格式数据:', jsonOutput);

  // 可选：自动下载JSON文件
  const blob = new Blob([jsonOutput], { type: 'application/json' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'table-export.json';
  downloadLink.click();
  URL.revokeObjectURL(downloadLink.href);
});

关键细节说明 #

• 用Array.from把DOM节点列表转成数组，方便使用map/reduce等数组方法处理
• 自动过滤空列标题，避免生成无效的键值对
• 每一行数据都会被转为键值对对象（键是列标题，值是单元格内容），结构清晰易读
• JSON.stringify的第三个参数2用于格式化JSON，让输出的字符串排版更美观
• 额外添加了JSON下载功能，这是保存表格数据的常用需求，可根据需要保留或删除

测试方式 #

在表格中输入内容后点击「Save table」：

• 打开浏览器控制台（F12 → Console），就能看到结构化数据和JSON字符串
• 同时会自动下载一个table-export.json文件，里面就是你的表格数据

内容的提问来源于stack exchange，提问作者rob.m