问创建动态表-3列乘N行？
EN

Stack Overflow用户

提问于 2018-01-27 04:09:22

回答 2查看 1.4K关注 0票数 0

我有一个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++){ ??? }？

html

node.js

ejs

javascript

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

发布于 2018-01-27 04:41:31

我的想法是，为了创建一些包含3列的行，您可以在tr重新构建您的联系人arr之前尝试插入for：

    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>

票数 0

Stack Overflow用户

发布于 2018-01-27 23:54:09

在手动编写了一个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>