Question

我有一个由其他软件生成的表，每行包含50列，我试图通过在</tr><tr>元素的末尾添加<td>来打破列

这是即时生成的代码：

<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
  ...etc
<td class="col51" scope="col">End column</td>

如果我使用这个Jquery：

$( ".col4").after('</tr><tr><td>&nbsp;</td>');

它会附加但不尊重</tr> ....它会忽略它并添加<tr>，从而生成此代码。

<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>

想知道让JQUERY为我添加<TR>的最佳方法是什么？当我在Firebug中修改代码时，打破行会给我提供所需的输出，只是不知道如何让JQUERY给我</tr>。

Answer 1

<强> jsFiddle Example

Detach最后2个单元格，将它们附加到tbody并用tr

包装它们

$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')

Answer 2

您无法使用JQuery单独插入标记。例如，使用以下代码，将元素插入到正文中：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <script>
            $("body").append("<p>");
        </script>
    </body>
</html>

使用Firefox检查器，这就是DOM的样子：

dom

因此，$("...").append("")，$("...").append("")，$("...").append("")都以相同的方式修改DOM。

Answer 3

您无法将不完整或非法格式化的HTML作为DOM元素处理。您希望在该列之前收集格式正确的子项，并将它们填充到新的完整<tr>。

如果您想将HTML作为文本处理，则需要将其转换为html()的文本，并将其粘贴到实际正确关闭的HTML中，然后将其转换回来。

jQuery.after不会接受在启动元素后结束元素

3 个答案: