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

To modify the database format SQL uses two functions called PIVOT and UNPIVOT. I was wondering, is there a way of achieving the same thing using a script on the client side?

要修改数据库格式,SQL使用两个名为PIVOT和UNPIVOT的函数。我想知道,有没有办法在客户端使用脚本实现相同的功能?

Let's take this table for example:

我们以此表为例:

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}

As you already know, every html table with dynamic data will print rows. What i'm trying to do is having an html table with dynamic data printing columns so I can display a nice product listing like in this example:

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

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|

I'm trying to display 3 objects per row. Is there a way of doing this with a simple javascript?

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

I'm trying to achieve exactly the same thing as Vans (example here)!

我正在努力实现与Vans完全相同的东西(例如这里)!

Edited New code

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

3 个解决方案

#1

You could create custom divs for each object:

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

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

Create a div for each product put them in a parent divs and style them with css (the CSS property display: table; and table-* might be of interest to you if you want to do it this way, another possibility is to use libraries).

为每个产品创建一个div,将它们放在父div中并使用css对它们进行样式化(CSS属性display:table;如果你想这样做,table- *可能会引起你的兴趣,另一种可能是使用库)。

The easier solution is just to put those divs inside the cells of a table although you should only use tables if you really want to display tabular data.

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

You seem to have JSP code, not Javascript, here is how to generate the forms in JSP (btw. JSP is the same as Java Servlets, just another way of writing it, simply put: JSP = html with Java, Servlet = Java with html). Using forms instead of divs because that seems to be what you want:

你似乎有JSP代码,而不是Javascript,这里是如何在JSP中生成表单(顺便说一句.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>

#2

jsfiddle DEMO

This function takes an HTML table and returns a table which has the given table's rows and columns swapped.

此函数接受一个HTML表并返回一个表,该表具有交换给定表的行和列。

Example input:

----------------
A1  |  A2  |  A3
----------------
B1  |  B2  |  B3
----------------

Output:

---------
A1  |  B1
---------
A2  |  B2
---------
A3  |  B3
---------

Javascript:

function convertTable(tbl) {
    var rows = tbl.rows.length;
    var cols = tbl.rows[0].cells.length;
    var tbl2 = document.createElement('table');

    for (var i = 0; i < cols; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < rows; j++) {
            var td = document.createElement('td');
            var tdih = tbl.rows[j].cells[i].innerHTML;
            td.innerHTML = tdih;
            tr.appendChild(td);
        }
        tbl2.appendChild(tr);
    }
    return tbl2;
}

#3

The best (easiest, most maintainable, most semantic) way to do this is pure CSS. You shouldn't have to change the markup at all.

最好(最简单,最易维护,最语义)的方法是纯CSS。您根本不必更改标记。

And it's actually pretty easy.

它实际上非常简单。

You just have to get the browser to stop treating it like table data. The key is the display: CSS property.

您只需要让浏览器停止像表数据那样对待它。关键是display:CSS属性。

display defaults to table-row for <tr> elements and table-cell for <td> elements, which makes sense. You have to "break" that property.

显示默认为元素的表行和元素的table-cell,这是有意义的。你必须“打破”这个属性。

tr, td {
    display: block;
}

In other words, you're telling the browser to "display table row and table data elements just like any other block-level element (like a div, for example)".

换句话说,您告诉浏览器“显示表格行和表格数据元素就像任何其他块级元素(例如div)”。

This gets you almost all the way there. Now you have to get the table "rows" (which are now being laid out like divs) to stack next to each other, instead of on top of each other.

这几乎可以让你一路走来。现在你必须得到表“行”(现在正像div一样布局)堆叠在一起,而不是彼此叠加。

tr {
    float: left;
}

Now, you end up with the possibility of the new "rows" not being the same height. If, for example, your product images are not all the same height, or if your descriptions are different lengths, you'd end up with the table being way out of alignment.

现在,你最终可能会出现新的“行”不一样的高度。例如,如果您的产品图像的高度不同,或者您的描述长度不同,那么您最终会使表格不对齐。

So, you need to give your <td>s all the same height.

所以,你需要给你的高度相同。

td{
    height: 150px; /*or whatever height you want*/
}

So, the full CSS code looks like this:

所以,完整的CSS代码如下所示:

tr {
    display: block;
    float: left;
}
td {
    display: block;
    height: 150px;
}

Obviously, this is only the most basic code to get your foot in the door. In the real world, you'd give each type of <td> its own height, something like:

显然,这只是最基本的代码,让您踏上门。在现实世界中,你会为每种类型的赋予自己的高度,例如:

td.product-image {
    height: 150px;
}
td.product-description {
    height: 70px;
}
td.product-price {
    height: 40px;
}

Here's a codepen that puts it all together: table data pivoted

这是一个将所有内容组合在一起的代码集:表数据转向

Also, here's some more info on the CSS display property if you're interested.

另外,如果您有兴趣,可以在CSS显示属性中获得更多信息。

Best of luck. Feel free to ask in comments if you have any further questions.

祝你好运。如果您有任何其他问题,请随时在评论中提问。