使用 .after 添加 </tr><tr> 不起作用

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 元素并被插入。

您需要找到一种方法，从一个 tr 中删除 td，创建一个新的 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 或th 的外部，p 将导致标记无效，因为p 不是@ 的有效子级987654339@、tfoot、thead、tr或table。

---

编辑以更新已发布的 jQuery，将 parent() 替换为 closest()：

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

JS Fiddle demo.

参考资料：

• append().
• closest()。
• each()。
• insertAfter()。
• next().
• parent()。