如何用JS数组生成HTML表格？Arquero等库能否实现？

我有一些表格数据（可能来自.csv文件，也可能不是），希望在网页上展示，理想情况下还需先对数据进行预处理与聚合。

我的index.html文件中有如下标签：

<table id="data"></table>

script.js文件内容如下：

let my_data = {
   "Fruit": ["apple","peach","banana"],
   "Price": [2,3,2]
}

我原以为只需通过以下代码即可填充HTML表格：

document.getElementById("data").innerHTML = my_data

但实际操作显然更复杂。更棘手的是，由于要进行数据预处理，script.js中的表格数据行列数量会发生变化，无法在HTML端预先填充表格结构。

我考虑使用以下工具库来解决问题：

• Arquero.js
• Tidy.js
• Data-Forge

例如，Arquero拥有.toHTML()方法，我本以为只需创建一对<div></div>标签并将Arquero表格插入其中即可，但这种方法并不奏效。

现提出两个问题：

1. 我考虑使用Plotly的表格组件，但想了解是否存在简便方法，从JS脚本中填充行列结构可变的HTML表格？
2. 是否可以将Arquero/Tidy.js/Data-Forge的表格对象输出到HTML元素（如div或figure等）中？

问题1：简便填充行列可变的HTML表格 #

有两种原生JS实现方式，无需额外依赖，能自动适配行列变化：

方法1：手动构建DOM元素 #

遍历数据字段生成表头，再逐行生成表格内容：

function renderTable(data, tableId) {
  const table = document.getElementById(tableId);
  table.innerHTML = ''; // 清空现有内容

  const headers = Object.keys(data);
  const rowCount = data[headers[0]].length;

  // 创建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  headers.forEach(header => {
    const th = document.createElement('th');
    th.textContent = header;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 创建表体
  const tbody = document.createElement('tbody');
  for (let i = 0; i < rowCount; i++) {
    const row = document.createElement('tr');
    headers.forEach(header => {
      const td = document.createElement('td');
      td.textContent = data[header][i];
      row.appendChild(td);
    });
    tbody.appendChild(row);
  }
  table.appendChild(tbody);
}

// 调用渲染
renderTable(my_data, 'data');

方法2：模板字符串拼接HTML #

代码更简洁，适合数据量不大的场景：

function renderTable(data, tableId) {
  const headers = Object.keys(data);
  const rowCount = data[headers[0]].length;

  let html = '<thead><tr>';
  headers.forEach(h => html += `<th>${h}</th>`);
  html += '</tr></thead><tbody>';

  for (let i = 0; i < rowCount; i++) {
    html += '<tr>';
    headers.forEach(h => html += `<td>${data[h][i]}</td>`);
    html += '</tr>';
  }
  html += '</tbody>';

  document.getElementById(tableId).innerHTML = html;
}

renderTable(my_data, 'data');

问题2：将工具库表格对象输出到HTML元素 #

Arquero.js #

核心是先把原始数据转为Arquero表格对象，调用.toHTML()获取HTML字符串后插入元素：

// 假设已引入Arquero
import aq from 'arquero';

// 转换数据并预处理
const aqTable = aq.from(my_data);
const processedTable = aqTable.groupby('Fruit').rollup({
  avgPrice: aq.op.avg('Price')
});

// 渲染到表格元素
document.getElementById('data').innerHTML = processedTable.toHTML();

之前失效大概率是没正确转成Arquero表格，或直接把对象而非HTML字符串赋值给innerHTML。

Tidy.js #

Tidy.js专注数据处理，需先处理数据，再用原生方法渲染：

// 假设已引入Tidy.js
import tidy from '@tidyjs/tidy';

// 预处理数据
const processedData = tidy(my_data, [
  tidy.groupBy('Fruit', [
    tidy.avg('Price', { as: 'avgPrice' })
  ])
]);

// 转换为原生渲染适配的结构
const formattedData = {
  Fruit: processedData.map(item => item.Fruit),
  avgPrice: processedData.map(item => item.avgPrice)
};

// 调用之前的renderTable函数
renderTable(formattedData, 'data');

Data-Forge #

同样先处理数据，再转换为原生结构后渲染：

// 假设已引入Data-Forge
const dataForge = require('data-forge');

// 转换并预处理数据
const df = new dataForge.DataFrame(my_data);
const processedDf = df.groupBy(row => row.Fruit)
  .select(group => ({
    Fruit: group.first().Fruit,
    avgPrice: group.deflate(row => row.Price).average()
  }));

// 转换为键值对结构
const formattedData = processedDf.toArray().reduce((acc, item) => {
  Object.keys(item).forEach(key => {
    acc[key] = acc[key] || [];
    acc[key].push(item[key]);
  });
  return acc;
}, {});

// 渲染表格
renderTable(formattedData, 'data');

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