创建动态表 - N 行 3 列？答案

【问题标题】：Create dynamic table - 3 Columns by N-rows?创建动态表 - N 行 3 列？
【发布时间】：2018-01-28 13:16:05
【问题描述】：

我有一个想要遍历的 JS 对象，创建一个三列 N 行表。

我可以有 1 到 N 个条目，但总是希望它是一个 3colxNrow 表。

到目前为止，我可以得到一个单列，N行的表：

<% for (var person in contacts){ %>
<div>
    <table>
        <tbody>
            <tr>
                <td>
                    <h2><u><%= person; %></u></h2>
                    <p id="email"><%= contacts[person]["email"]; %></p>
                    <p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
                </td>
                <td>
                    <img src=<%= contacts[person]["image"] %> >
                </td>
            </tr>
        </tbody>
    </table>
</div>
<br>
<% } // for (var person in contacts) %>

我不知道如何为行执行此操作。以上返回this。请注意，它是 7 行，一列。

我知道我需要以某种方式循环并在 tr 中添加三个 td，但不太明白如何操作。

...
        <tbody>
            <tr>
               <% for (var person in contacts){ %>
                <td>
                    <h2><u><%= person; %></u></h2>
                    <p id="email"><%= contacts[person]["email"]; %></p>
                    <p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
                </td>
                <td>
                    <img src=<%= contacts[person]["image"] %> >
                </td>
              <% } // for (var person in contacts) %>
            </tr>
        </tbody>
...

这会产生一行N columns wide。我需要一些逻辑吗，比如某处的for (var i = 1; i < 4; i++){ ??? }？

【问题讨论】：

我重写了代码，试试看。 tr - 是行数，td - 是当前行中的列数。
我创建数组，并将联系人划分为具有 3 个元素的数组。看看我的新代码。
也许这不是好方法，但它的代码应该可以工作。
这是一个非常非常可怕的问题！你是不会想的！！

标签： javascript html node.js ejs

【解决方案1】：

我想，要创建一些包含 3 列的行，您可以尝试将 for 插入到 tr 之前重建您的联系人 arr：

    let arrContacts = [];
    let j = -1, i = 0;
    for(let p in contacts  ){ 
        if(i%3===0){
          arrContacts.push([]);
          j++;  
        }
    arrContacts[j].push(contacts[p]);
   i++;
}

并使用下一个模板：

  <tbody> 
           <% for (var i=0;i<arrContacts.length; i++){ contacts =arrContacts[i] ;%>
                <tr>
                   <% for (var person in contacts){ %>
                    <td>
                        <h2><u><%= person; %></u></h2>
                        <p id="email"><%= contacts[person]["email"]; %></p>
                        <p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
                    </td>
                    <td>
                        <img src=<%= contacts[person]["image"] %> >
                    </td>
                  <% }  %>
                </tr>
                <% }  %>
            </tbody>

【讨论】：

这会创建一个单列，因为对于每个person，它会创建一个单行。 Here's a screenshot
如果我用for (var person in contacts...) 切换for (var i = 0... 循环，它会越来越近！我得到三列，但数据重复而不是每个td 做一个唯一的人。 Screenshot here
对不起，我忘记重写联系人变量了。

【解决方案2】：

在手动编写了一个 3 列 4 行的 HTML 表格后，将 HTML 物理打印出来并拿笔……我想我明白了！

<div>
    <table>
        <tbody>
            <% var i = 1; %>
            <% var numCols = 3; %>
            <tr>
                <% for (var person in contacts){ %> 
                    <% console.log("Person: " + person);%>
                    <td>
                        <h2><u><%= person; %></u></h2>
                        <p id="email"><%= contacts[person]["email"]; %></p>
                        <p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
                    </td>
                    <td>
                        <img src=<%= contacts[person]["image"] %> >
                    </td>
                <% if (i%(numCols)===0 && i > 1){%>
                    </tr>
                    <tr>
                <% } // (i%(numCols)===0 && i > 1) %> 
                <%i+=1;%>
                <% } // for (var person in contacts) %>                     
            </tr>
        </tbody>
    </table>
</div>

Yay! 我认为诀窍在于找出条件包含 <tr></tr> 以仅在达到列限制时结束一行。

（如果有人遇到此问题并有任何 cmet、改进、警告，请告诉我！）

【讨论】：