如何将表格中的对象数组分两列显示？

Question

我想在表格的两列中显示一系列对象。将列表显示为两列的最简单方法是什么？

const colmns = [
    {
      subHeading: "A",
      subText: ["1", "2"]
    },
    {
      subHeading: "B",
      subText: ["3", "4"]
    },
    {
      subHeading: "C",
      subText: ["5", "6"]
    },
    {
      subHeading: "D",
      subText: ["7", "8"]
    }
  ];

在 HTML 页面上所需的显示：

A B
C D

Answer 1

您可以在此处使用

Grid

：

CODESANDBOX

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
  {columns.map((col, i) => {
    return <h1>{col.subHeading}</h1>;
  })}
</div>

Answer 2

使用 JavaScript 使用您的 colmns 对象数组填充表格。

const table = document.querySelector("table");

for (let i = 0; i < colmns.length; i += 2) {
    const row = document.createElement("tr");

    for (let j = i; j < i + 2 && j < colmns.length; j++) {
        const cell = document.createElement("td");
        cell.textContent = colmns[j].subHeading;
        row.appendChild(cell);
    }

    table.appendChild(row);
}

此 JavaScript 代码根据您的 colmns 对象数组动态地用两列填充表格。它迭代数组，为每对对象创建一个新行，并将它们的 subHeading 值添加到表中的单元格中。这将为您提供所需的两列显示：

Column 1  Column 2
   A          B
   C          D