Question

In my HTML:

<table>
    <tr><td>product 1</td><td>image 1</td></tr>
     <tr><td>product 2</td><td>image 2</td></tr>
</table>

would look like

+-----------+-------+
|  product 1|image 1|
+-----------+-------+
|  product 2|image 2|
+-----------+-------+

how do i make it look like:

+----------+---------+
| product 1|product 2|
+----------+---------+
| image1   |image 2  |
+----------+---------+

Without changing the HTML, how can i solve this?

jQuery, CSS, anything would be okay except modifying HTML!

I know this is not how table is used, but I need to change a table that is generated by the PHP and I can’t touch the PHP (in this case)

Answer 1

Maybe not the most compact solution, but this should work:

// map cells to 2D array
var cells = [];
$("tr").each(function(i,e) {
    cells.push($(e).find("td"));
});

// switch cell content of (0,1) and (1,0)
var cell1 = $(cells[0][1]);
var cell2 = $(cells[1][0]);
var temp = cell1.html();
cell1.html(cell2.html());
cell2.html(temp);