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

难以实现的方法，但努力达到无限长的行col：

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足够你？

HTML强制表行在列中

5 个答案: