將多列html表格轉換爲單列以便移動友好佈局

Question

我有一個3列的表。我想轉換成單排。

both append.('</tr><tr>') and after.('</tr><tr>') do not work. 

想這樣的移動友好的頁面 -

謝謝您的幫助！你可以做到這一點

http://jsfiddle.net/tZt3Q/

Answer 1

的方法之一是使用JQuery包裝方法。見Wrap和UnWrap

Demo

Demo W/O class

$(document).ready(function() { 
    var tbl = $("table"); 
     $('td','table').unwrap().each(
    function() {  
      tbl.append($(this).wrap('<tr>').parent()); 
    }); 
    }); 

簡單多了一個：

$(document).ready(function() { 
    $('table').find('td').unwrap().wrap($('<tr/>')); 
}); 

Fiddle

Answer 2

就像一個建議..你可以使用divs的細胞，而不是一個表，它會發生，沒有任何JS使用浮動CSS：

這樣的：

http://jsfiddle.net/tZt3Q/9/

HTML：

<div class="tableDivColumns"> 
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div> 
    <div>Seven</div><div>Eight</div><div>Nine</div> 
</div> 

<div class="tableDivRows"> 
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div> 
    <div>Seven</div><div>Eight</div><div>Nine</div> 
</div> 

CSS：

.tableDivColumns {border:1px solid green; padding 5px; width:160px;height:160px;} 
.tableDivColumns div {border:1px solid blue; width:50px; height:50px;float:left;} 

.tableDivRows {border:1px solid green; padding 5px; width:60px;height:470px;} 
.tableDivRows div {border:1px solid blue; width:50px; height:50px;float:left;} 

Answer 3

試試這個：

單列：

var $tds = $("table td").clone(); 
$("table").empty().append($("<tr>").append($tds)); 

http://jsfiddle.net/hescano/tZt3Q/10/

單列：

var $tds = $("table td").clone(); 
$("table").empty(); 
$tds.each(function(){ 
    $("table").append($("<tr>").append($(this))); 
}); 

http://jsfiddle.net/hescano/tZt3Q/11/