HTML表格行跨度

问题描述

我要遍历具有3个项目的对象，有时该对象的长度大于1。我只想拥有3个列，但是当对象多于1个时，它会增加列数。行跨度必须增加而不是cols。 我正在使用ejs模板。如何确保当数据长度大于1时。列数保持不变，并且每个项目数据都显示在一行中。

  <% value.cartItems.map(item =>{ %>
   <td><%= item.name %></td>
   <td><%= item.count %></td>
   <td><%= item.key %></td>
  <% })%>

2个对象的购物车数据

[
  {
    count: 1,key: 'ID02',name: 'Tiny Ganesh',pic: 'http://res.cloudinary.com/antique/image/upload/v1596196504/cklhq28mzm5b61hrwcve.jpg',price: '2070'
  },{
    count: 1,key: 'ID03',name: 'Ganesh With Kalash',pic: 'http://res.cloudinary.com/antique/image/upload/v1596196650/tiwxkkug3hms2unacike.jpg',price: '3570'
  }
]

表格代码

<table class="responsive-table highlight ">
            <thead>
              <tr>
                  <th>Date</th>
                  <th>Order Id</th>
                  <th>Address</th>
                  <th>Product</th>
                  <th>Product Count</th>
                  <th>Product Code</th>
              </tr>
            </thead>
        <% data.map(i =>{%>
            <% for (const [key,value] of Object.entries(i)) { %>
                     <tbody>
                      <tr>
                        <td><%= value.orderDate %></td>
                        <td><%= value.orderId %></td>
                        <td ><%= value.address %></td>
                        <% console.log(value.cartItems)%>
                        <% if(value.cartItems.length == 1){ %>
                        <% value.cartItems.map(item =>{ %>
                            <td><%= item.name %></td>
                            <td><%= item.count %></td>
                            <td><%= item.key %></td>
                        <% })%>
                        <% }%>
                        
                      </tr>
                    </tbody>
            <% } %>
        <% })%>
    </table>

解决方法

您需要确保始终有与标题相同数量的表单元格。因此，您需要添加一个else，然后可以删除冗余映射功能：

    <table class="responsive-table highlight ">
        <thead>
              <tr>
                  <th>Date</th>
                  <th>Order Id</th>
                  <th>Address</th>
                  <th>Product</th>
                  <th>Product Count</th>
                  <th>Product Code</th>
              </tr>
        </thead>
        <% data.map(i =>{%>
           <tbody>
            <% for (const [key,value] of Object.entries(i)) { %>
                      <tr>
                        <td><%= value.orderDate %></td>
                        <td><%= value.orderId %></td>
                        <td ><%= value.address %></td>
                        <% if(value.cartItems.length == 1){ %>
                            <td><%= value.cartItems[0].name %></td>
                            <td><%= value.cartItems[0].count %></td>
                            <td><%= value.cartItems[0].key %></td>
                        <% } else { %>
                           <td></td>
                           <td></td>
                           <td></td>
                        <% }%>
                      </tr>
            <% } %>
           </tbody>
        <% })%>
    </table>