用JS forEach实现多维数组到html表的转换

基础概念

forEach 是 JavaScript 中的一个数组方法，用于遍历数组中的每个元素，并对每个元素执行一个回调函数。多维数组是指包含一个或多个数组的数组。

类型

一维数组：普通的数组，如 [1, 2, 3]。
多维数组：包含一个或多个数组的数组，如 [[1, 2], [3, 4]]。

应用场景

将多维数组转换为 HTML 表格是一个常见的应用场景，特别是在数据展示和报表生成方面。

示例代码

以下是一个使用 forEach 方法将多维数组转换为 HTML 表格的示例：

// 示例多维数组
const data = [
  ['Alice', 24, 'Engineer'],
  ['Bob', 30, 'Designer'],
  ['Charlie', 28, 'Manager']
];

// 创建表格元素
const table = document.createElement('table');
table.border = '1';

// 创建表头
const headerRow = document.createElement('tr');
['Name', 'Age', 'Role'].forEach(headerText => {
  const th = document.createElement('th');
  th.textContent = headerText;
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

// 填充表格数据
data.forEach(rowData => {
  const row = document.createElement('tr');
  rowData.forEach(cellData => {
    const cell = document.createElement('td');
    cell.textContent = cellData;
    row.appendChild(cell);
  });
  table.appendChild(row);
});

// 将表格添加到页面
document.body.appendChild(table);

解释

创建表格元素：首先创建一个 table 元素，并设置其边框。
创建表头：使用 forEach 遍历表头数组 ['Name', 'Age', 'Role']，为每个表头创建一个 th 元素，并将其添加到表头行 headerRow 中。
填充表格数据：使用嵌套的 forEach 遍历多维数组 data，为每行数据创建一个 tr 元素，并为每个单元格数据创建一个 td 元素，将其添加到当前行中。
将表格添加到页面：最后，将创建好的表格添加到页面的 body 中。