jquery - HTML 强制表格行在列中

Question

在我的 HTML 中：

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

看起来像

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

我如何使它看起来像：

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

在不更改 HTML 的情况下，我该如何解决这个问题？

jQuery，CSS，除了修改 HTML 什么都行！

我知道这不是表格的使用方式，但我需要更改由 PHP 生成的表格并且我无法触摸 PHP（在这种情况下）

Answer 1

也许不是最紧凑的解决方案，但这应该可行：

// 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);

Answer 2

丑陋的做法，但工作到无限长的行列：

http://jsfiddle.net/TXwq2/

Answer 3

这也是一种排序方式

var f = $('td:contains(product)');
var d = $('td:contains(image)');
f.sort(function(a, b) {
    return $(a).text().replace('product', '') - $(b).text().replace('product', '');
});
d.sort(function(a, b) {
    return $(a).text().replace('image', '') - $(b).text().replace('image', '');
});
$('table > tbody').empty().append(f).children('td').wrapAll('<tr>');
$('table > tbody').append(d).children('td').wrapAll('<tr>');

http://jsfiddle.net/PFaVT/2/

Answer 4

不是很优雅，但应该可以工作jsFIDDLE

var newTableRow=[];
var newTableRow2=[];
$('table tr').each(function(){
    newTableRow.push($(this).find('td:first'))
    newTableRow2.push($(this).find('td:eq(1)'))
    });

$('table tr:first').append(newTableRow)
$('table tr:eq(1)').append(newTableRow2)​

Answer 5

<style>
table tr:first-child > td:nth-child(2){display:inline; position:relative; left:-64px; top:24px}
table tr:last-child > td:nth-child(1){display:inline; position:relative; left:64px; top:-24px}
</style>
<table>
    <tr><td>product 1</td><td>image 1</td></tr>
     <tr><td>product 2</td><td>image 2</td></tr>
</table>

Hacktastic 对你来说足够了吗？