Question

要修改数据库格式，SQL使用两个名为PIVOT和UNPIVOT的函数。我想知道，有没有办法在客户端使用脚本实现同样的事情？

我们以此表为例：

Rowa. pro_img#1|${product.name}|${product.price}|${product.description}
Rowb. prod_img#2|${product.name}|${product.price}|${product.description}
Rowc. prod_img#3|${product.name}|${product.price}|${product.description}
Rowd. pro_img#4|${product.name}|${product.price}|${product.description}

如您所知，每个包含动态数据的html表格都会打印rows。我想要做的是拥有一个带有动态数据打印的html表columns，这样我就可以显示一个很好的产品列表，如下例所示：

Product_img#1|             Product_img#2|            Product_img#3|
Product_name|              Product_name|             Product_name|
Product_price|             Product_price|            Product_price|
Product_description|       Product_description|      Product_description|

我正在尝试每行显示3个对象。有没有办法用简单的JavaScript进行此操作？

我正在努力实现与Vans (example here)!

完全相同的事情

编辑新代码

<div id="product_container">
                <c:forEach var="product" items="${categoryProducts}" varStatus="iter">
                
                    <div id="product_image"><a href="viewProduct?${product.id}">
                                    <img class="img" alt="" src="${initParam.productImagePath}${product.id} (1).jpg" /></a></div>
                    <div id="product_name">${product.name}</div>
                    <div id="product_price">${product.price}</div>
                    <div id="add_toList"><form id="wishlistForm" action="addToWishlist" method="post">
              <input name="productId" value="${product.id}" type="hidden">

              <input class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
            </form></div>
            
                    <div id="add_toCart"><form id="cartForm" action="addToCart" method="post">
              <br>
              <br>

              <input name="productId" value="${product.id}" type="hidden">
              <input class="submit" value="<fmt:message key='AddToCart'/>" type="submit">


            </form></div>
                    
                    
                    
                    
            </c:forEach>
                </div>

Answer 1

您可以为每个对象创建自定义div：

function generateProductDiv(product) {
   return
     '<div class="product">' +
         '<img src="' + product.image + '">' +
         '...' +
     '</div>';
}

为每个产品创建一个div，将它们放在父div中并用css设置样式（如果你想这样做，CSS属性display: table;和table-*可能是你感兴趣的，另一种可能性是使用库。）

更简单的解决方案就是将这些div放在表格的单元格中，尽管如果你真的想要显示表格数据，你应该只使用表格。

你似乎有JSP代码，而不是Javascript，这里是如何在JSP中生成form（顺便说一句.JSP与Java Servlets相同，只是另一种编写方式，简单地说：JSP = html with Java，Servlet = Java with html）。使用表单而不是div，因为这似乎是你想要的：

<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
    <form id="wishlistForm" action="addToWishlist" method="post">
        ...
        <a href="viewProduct?${product.id}">
            <img class="img" alt="" src="${initParam.productImagePath}${product.id} (1).jpg" />
        </a>
        ...
    </form>
</c:forEach>

如何动态地将html表行转换为列？

编辑新代码

1 个答案: