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

在此输入图像描述

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

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

在此输入图像描述

谢谢您的帮助!

http://jsfiddle.net/tZt3Q/

===============>>#1 票数:16 已采纳

实现此目的的一种方法是使用JQuery wrap方法。 请参阅WrapUnWrap

演示

演示W / O类

 $(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/>'));
});

小提琴

===============>>#2 票数: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/

===============>>#3 票数:1

就像一个建议..你可以使用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;}

  ask by Win translate from so

未解决问题?本站智能推荐:

2回复

使用jquery从html表中选择第二行

我使用以下jQuery函数突出显示Html表中的行(使用bg color)。它工作正常。我的问题是如何从表中选择第二行.``highlight''是一个类 这里的姓名,年龄作为第一行出发 。即标题。 下一个测试test1是tabe的元素。如果我使用那个jquery函数,则title(n
3回复

如果没有唯一标识属性但有HTML注释,如何用jQuery选择HTML?

我正在为我经常访问的论坛编写自定义脚本。 它设计用于在我查看时从板上删除签名,因为它们分散注意力并且令人讨厌,并且它们无法在选项中禁用它们。 无论如何,我可以使用有用的Chrome扩展程序运行自定义脚本。 我能够修改页面的任何部分,其中HTML节点具有类,ID,甚至具有一些独特信息的属
6回复

使用HTML DOM在文档中查找元素

我需要能够选择和修改HTML文档中的元素。 使用jQuery查找元素的通常方法是使用选择器,该选择器根据属性,id,类或元素类型进行选择。 但是,就我而言,我有元素的HTML DOM,并且我想在文档中找到与该DOM匹配的元素。 重要事项: 我知道我可以使用类选择器或ID选择器等。
1回复

jQuery类选择器不适用于数据表中JSON生成的元素

我有一个问题,也许我是一个正在提交错误或者根本不了解DOM如何工作的人,我不确定。 关键是我正在使用PHP和以下代码从服务器端处理项目: 这将转换为JSON,然后使用此调用: 它依赖于数据表组件。 生成这样的HTML代码: 然后在加载了jQuery和所有必要库的同一模
1回复

jsoup解析,选择未归因的HTML

前言: 我的移动运营商非常友好,可以提供一个主页,允许其客户跟踪其数据计划(使用的带宽,最大带宽等)。 我想为此创建一个(Android)应用,使用jsoup进行解析。 问题: 可悲的是,该网络服务没有API,而DOM结构充其量是狡猾的。 div.barTextBel
2回复

jQuery:选择和操作DOM之外的html元素

据我所知,只有加载到DOM中的对象才能被选择器操纵。 这在下面的示例中说明,当单击按钮时,它的单击处理程序未成功尝试选择要加载的页面中的元素并在之前更改它的html。 我推测,因为在链接页面加载到DOM之前触发了单击处理程序,所以选择器不会影响该元素。 我的问题是,有没有办法实例化一个
2回复

将jQuery选择器变量附加到表中

总的jQuery /编程新手在这里。 我有一堆可以选择的文本框。 选中该框后,我想在表格中添加新行,并将文本框中的h4添加到新行的第一列中。 变量有些麻烦。 文本框如下所示: 表格看起来像这样: 和我的jquery看起来像这样,但是如何获取它来打印变量produc
3回复

jQuery将div加载到另一个没有.html()方法的文件中

我有一个要显示在另一个div(食物)中的div(我们称其为土豆)。 这样做的典型方法是: 但是,这并没有实现我想要的。 jQuery似乎没有使用实际的“ potatoes” div,而是将内容复制到food div,而原始内容仍然存在于浏览器中。 我希望ACTUAL div(土
1回复

使用JQuery生成HTML,然后使用.html()对其进行更改。 在FF中可以,但不能使用Chrome吗?

我正在利用JQuery cycle插件。 该插件生成带有编号链接的图像滑块,以在图像之间交换。 我想将编号链接更改为自己的一些HTML(例如:将“ 1”更改为“我的字符串”),因此我创建了: 在Fire Fox中可以正常工作,但在Chrome中则不能。 我相信这是因为带编号的链
2回复

如何访问html字符串中尚未添加到DOM树的元素?

我正在加载一个HTML模板文件,其中包含我在整个应用程序中使用的模板。 该文件如下所示: 通过requireJS提取模板,这将HTML代码作为文本字符串返回给我。 我已经使用var el = $( string )将字符串转换为jQuery对象,但是我仍然无法访问任何元素(我想是