0

私の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に触れることができません（この場合）

4

5 に答える 5

2

おそらく最もコンパクトなソリューションではありませんが、これはうまくいくはずです：

// 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);
于 2012-08-24T03:32:53.620 に答える
1

これもソートの方法です

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/

于 2012-08-24T03:59:55.493 に答える
1

それを行う醜い方法ですが、行列の無限の長さまで作業します:

http://jsfiddle.net/TXwq2/

于 2012-08-24T03:53:18.800 に答える
0 
<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>

あなたにとって十分なハックタスティックですか？

于 2012-08-24T11:39:45.780 に答える
0

あまりエレガントではありませんが、動作するはずです 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)​
于 2012-08-24T03:38:03.090 に答える