Question

我有一个table，目前每行有两列，我需要使用jQuery将其拆分。

我试过了：

$(document).ready(function() {
    $('.TextBold').after('</tr><tr>');
});

......但它不起作用。我想知道是否可以添加<p>Test</p>代替</tr><tr>吗？

在这里，您可以在JSFiddle中查看我的代码.. http://jsfiddle.net/QjJhU/

如果有人能解释这个问题，我将不胜感激。

Answer 1

问题在于您正在想象jQuery（以及一般的Javascript）编辑HTML文档。它没有。浏览器读取HTML，然后从中创建DOM结构。那时，HTML内容完全无关紧要。浏览器唯一关心的是DOM结构。

这意味着您无法添加元素：您只能将整个元素（或文本节点）添加到文档中。您正在尝试关闭一个标记（使用</tr>），然后再打开另一个标记（使用<tr>）。实际上，浏览器会读取</tr><tr>并从中创建一个DocumentFragment。由于结束标记本身无效，因此将被删除。然后<tr>本身就变成了一个完整的元素：有效地，<tr></tr>。这是有效的HTML，因此它被转换为有效的DOM元素并插入。

您需要设法从一个td中删除tr，创建一个新的tr并将td添加到其中。

这样的事情应该有效：

$('.TextBold').each(function() {
    $('<tr/>').insertAfter(this.parentNode).append($(this).next());
});

这说：

对于每个TextBold元素，请执行以下操作：
- 创建新的tr元素
- 在TextBold的父元素（tr）之后插入
- 将TextBold后面的元素附加到新tr（这也会将其从当前位置移除）

Here's a jsFiddle with this working code

Answer 2

尝试改为：

$('.TextBold').each(
    function(){
        $('<tr />').insertAfter($(this).parent()).append($(this).next('td'));
    });

JS Fiddle demo

你的方法不起作用的原因是因为JavaScript和jQuery创建了DOM节点，而不是标记。因此，您无法添加结束</tr>和开始<tr>标记，只能添加包含整个节点的DOM节点。

关于你的问题：

我想我能够在那里添加<p>Test</p>而不是</tr><tr>。

老实说，我无法理解你的意思;但是table或td内的<{1}}和之内，th会使标记无效，因为{{ 1}}不是p，p，tbody，tfoot或thead的有效儿童。

已修改更新已发布的jQuery，将tr替换为table：

parent()

JS Fiddle demo

参考文献：

使用.after添加a不起作用

2 个答案: