Question

我有一个JS对象，我想迭代，创建一个三列N行表。

我可以有1到N个条目，但总是想要一个3colxNrow表。

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    var cell = UITableViewCell()

    if indexPath.row == 0 {
        cell = tableView.dequeueReusableCell(withIdentifier: productImageCell, for: indexPath) as! ProductImageCell
    } else if indexPath.row == 1 {
        cell = tableView.dequeueReusableCell(withIdentifier: productDetailCell, for: indexPath) as! ProductDetailCell
    } else if indexPath.row == 2 {
        cell = tableView.dequeueReusableCell(withIdentifier: productDeliveryCell, for: indexPath) as! ProductDeliveryTimeCell
    } else {
        cell = tableView.dequeueReusableCell(withIdentifier: productDeliveryCell, for: indexPath) as! ProductDeliveryTimeCell
    }

    if let product = self.product {
        cell.product = product
    }
    cell.selectionStyle = .none
    return cell
}

我坚持如何为行做这件事。以上返回this。请注意它的所有一列共有7行。

我知道我需要以某种方式循环并在<% 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) %>中添加三个td，但无法完全了解。

tr

这会产生一行N columns wide。我需要一些逻辑，比如... <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> ...吗？

Answer 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>

Answer 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>有条件地包含结尾行。

（如果有人碰到这个并且有任何评论，改进和警告，请告诉我！）

创建动态表 - 按N行排列3列？

2 个答案: