将多列html表转换为单列，以实现移动友好布局

Question

我有一个包含3列的表格。我想转换成单行。

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

想要这样的移动友好页面 -

感谢您的帮助！

http://jsfiddle.net/tZt3Q/

Answer 1

您可以通过使用JQuery wrap方法实现此目的。见 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

试试这个：

单行：

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/

Answer 3

正如一个建议..你可以使用divs作为单元而不是表格，它将在没有任何JS使用float 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;}