javascript - 将多列 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/>'));
});

小提琴

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;}