通过 jQuery 添加 </tr><tr>答案

【问题标题】：Add </tr><tr> via jQuery通过 jQuery 添加 </tr><tr>
【发布时间】：2013-03-29 10:59:08
【问题描述】：

我有一个问题，我不知道如何解决它：

我有一张桌子：

|一个 |乙 |

| D | C |

<table>
<tr>
<td>
A
</td>
<td>
B
</td>
</tr>
<tr>
<td>
C
</td>
<td>
D
</td>
</tr>
</table>

现在我需要在每个奇数 td 之后添加 </tr><tr>。结果应该是一个列表：

|一个 |

|乙 |

| C |

| D |

我已经在尝试使用 jQuery $("#table tr > td:nth-child(odd)").after("</tr><tr>"); 进行这项工作，但它不起作用。

谁能给点建议？

【问题讨论】：

见stackoverflow.com/questions/171027/add-table-row-in-jquery 顺便说一句，由于表格没有ID，jQuery代码不起作用，但jQuery代码引用#table
</tr><tr> 看起来不像可以解析为 DOM 的有效 HTML。请记住：jQuery 使用 DOM 元素，而不是 HTML。
我这样做的原因是，我希望这张桌子能够响应屏幕宽度。因此，当屏幕小于 ...px 时，我希望每个单元格显示在上一个下方
您可以操纵元素的display 属性来实现这一点。这种方式可以避免大量和昂贵的 DOM 操作。
你的意思是我可以display:none每个偶数单元格？这不适合。如果你的意思是别的，你能给我一个提示吗？大脑正在融化，所以我现在理解起来很慢:)

标签： jquery dom html-table row tablerow

【解决方案1】：

试试

$('table td:odd').each(function(i, v){
    var $this = $(this);
    var parent = $this.parent();
    $this.detach().wrap('<tr></tr>').insertAfter(parent)
})

演示：fiddle

【讨论】：

【解决方案2】：

试试这个：(http://jsfiddle.net/b5S3U/4/)

var cols = 1;
$('tr').each(function () {
    var after = $(this);
    while ($(this).children().length > cols) {
        after = $('<tr>').insertAfter(after).append($('>:gt(' + (cols - 1) + '):lt(' + (cols) + ')', this));
    }
})

【讨论】：