如何基于JS对象生成3列N行的动态表格？

这个问题我之前也碰到过，核心是要把contacts对象里的条目按每3个一组来拆分——因为for...in是逐个遍历对象的，没法直接控制每行的列数。咱们一步步来搞定它：

第一步：把对象转换成数组（关键！） #

首先，for...in遍历对象时，虽然ES6+之后顺序是确定的，但直接用它没法分组。所以先把对象的键（也就是每个人的名字）转换成数组，这样就能按索引来分组了：

<% const people = Object.keys(contacts); %>

第二步：按每3个一组生成行和列 #

接下来用两层循环：

• 外层循环控制行数，每次步长设为3（因为每行要3列）
• 内层循环控制当前行的列数，从当前索引开始，最多取3个条目，同时要处理最后一行不足3个的情况

完整代码示例：

<div>
  <table>
    <tbody>
      <% const people = Object.keys(contacts); %>
      <% // 外层循环：每3个条目生成一行 %>
      <% for (let i = 0; i < people.length; i += 3) { %>
        <tr>
          <% // 内层循环：生成当前行的3个列（如果有剩余条目） %>
          <% for (let j = 0; j < 3; j++) { %>
            <% const index = i + j; %>
            <% if (index < people.length) { %>
              <% const person = people[index]; %>
              <td>
                <h2><u><%= person %></u></h2>
                <p class="email"><%= contacts[person]["email"] %></p>
                <p class="phoneNumber"><%= contacts[person]["phone number"] %></p>
              </td>
              <td>
                <img src="<%= contacts[person]["image"] %>" alt="<%= person %>">
              </td>
            <% } %>
          <% } %>
        </tr>
      <% } %>
    </tbody>
  </table>
</div>

重要细节说明 #

1. 修正重复ID的问题：你之前的代码里用了id="email"和id="phoneNumber"，但ID在页面中必须唯一！我改成了class，这样多个条目不会冲突。
2. 处理最后一行不足3列的情况：内层循环里加了if (index < people.length)的判断，避免尝试访问不存在的条目导致报错。
3. 数组索引的计算：index = i + j用来定位当前要渲染的条目，外层循环的i每次跳3，保证每行从新的一组开始。

这样就能完美生成3列N行的表格啦，不管条目数量是1个还是N个都能适配~

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