如何在HTML表格中以两列形式展示对象数组？

要实现把给定对象数组以两行两列的表格形式展示subHeading内容，原生JavaScript配合HTML就能完成，这里提供两种最简实现方式：

方式一：动态操作DOM生成表格 #

先在HTML中准备空表格容器，再通过JS遍历数组分组生成行和单元格：

HTML结构 #

<table id="twoColTable"></table>

JavaScript代码 #

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

const table = document.getElementById('twoColTable');
// 每两个元素为一组，生成一行
for (let i = 0; i < columns.length; i += 2) {
    const row = table.insertRow();
    // 添加第一个单元格
    const cell1 = row.insertCell();
    cell1.textContent = columns[i].subHeading;
    // 若存在第二个元素，添加对应单元格
    if (columns[i + 1]) {
        const cell2 = row.insertCell();
        cell2.textContent = columns[i + 1].subHeading;
    }
}

可选美化CSS #

如果需要调整单元格间距，可添加以下样式：

table {
    border-collapse: separate;
    border-spacing: 20px;
}
td {
    padding: 5px;
}

方式二：模板字符串拼接HTML #

直接通过模板字符串拼接完整表格HTML，一次性插入页面，代码更简洁：

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

let tableHtml = '<table>';
// 按每两个元素分组生成表格行
for (let i = 0; i < columns.length; i += 2) {
    tableHtml += '<tr>';
    tableHtml += `<td>${columns[i].subHeading}</td>`;
    if (columns[i + 1]) tableHtml += `<td>${columns[i + 1].subHeading}</td>`;
    tableHtml += '</tr>';
}
tableHtml += '</table>';

// 将生成的表格插入页面
document.body.innerHTML += tableHtml;

两种方式的核心逻辑一致：将数组按每两个元素为一组，每组对应表格的一行，每个元素对应一个单元格，最终实现A B一行、C D一行的展示效果。

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