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

【问题标题】：Convert multiple columns html table to a single column for Mobile friendly layout将多列 html 表转换为单列以实现移动友好的布局
【发布时间】：2013-04-09 05:05:37
【问题描述】：

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

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

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

感谢您的帮助！

http://jsfiddle.net/tZt3Q/

【问题讨论】：

标签： javascript jquery html dom jquery-selectors

【解决方案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

【讨论】：

我在 SO 每天都能学到新东西。优雅的解决方案 PScoder。
@PSCoder 我测试了它。它也解开 table 标签。现在结果就像..<body><tr><td>...
@Win 感谢您的指出。我已经更新了我的答案。请看看这是否有帮助。
@PSCoder +1 您编辑的代码有效。非常感谢您的帮助。

【解决方案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/

【讨论】：

这与我想要的相反。我希望只有一个单元格的行而不是一行中的所有单元格。
因为您在问题中说“我想转换为单行”而感到困惑。也许在图像中很清楚，但我看不到图像：p（工作中的阻塞域）
+1 您编辑的代码有效。我不能同时接受这两个答案。非常感谢您的帮助。

【解决方案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;}

【讨论】：

这是一个遗留的 ASP.Net 控件，所以我不能轻易转换为 div 标签而不花费大量时间。感谢您的评论。
明白，请记住，根据单元格的数量，JS 可能会影响性能，因此如果相关，我会先检查一下。