Q:

How to dynamically convert html table rows to columns?

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?
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:
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?
I'm trying to achieve exactly the same thing as Vans (example here)!
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>

A:

jsfiddle DEMO
This function takes an HTML table and returns a table which has the given table's rows and columns swapped.
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;
}

A:

You could create custom divs for each object:
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).
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.
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:
<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>

