Question

我有一个包含四个单元格的表格行。我正在尝试使用javascript来插入此内容：

</tr><tr>

在两个单元之间，基本上从一个单元创建两行（在某些屏幕大小）。

我需要改变这个：

<table>
    <tr>
        <td>stuff</td>        
        <td>stuff</td>        
        <td>stuff</td>        
        <td>stuff</td>
    </tr>
</table>

进入这个：

<table>
    <tr>
        <td>stuff</td>        
        <td>stuff</td> 
    </tr><tr>       
        <td>stuff</td>        
        <td>stuff</td>
    </tr>
</table>

这是我的剧本：

$('table tr td:nth-child(3)').before('</tr><tr>');

这就是我得到的：

<table>
    <tr>
        <td>stuff</td>        
        <td>stuff</td> 
    <tr></tr>            <--- notice that </tr><tr> becomes <tr></tr>!
        <td>stuff</td>        
        <td>stuff</td>
    </tr>
</table>

标签出现在正确的位置，但它们会被切换！

这到底是怎么回事？有人可以帮忙吗？

Answer 1

尽管jQuery提供了抽象，但您还没有使用HTML。您正在使用DOM对象。

"</tr><tr>"被解释为：

表格行的结束标记不存在，请忽略此
创建表格行

您需要创建一个表格行，将其放在您想要的位置，然后将表格单元格移动到其中。

可能是这样的：

var tr = $('<tr />');
tr.append($('td+td+td'));
$('table').append(tr);

Answer 2

您可以添加另一行，并将最后两个td元素转移到新行。

$('<tr>').insertAfter('tr').append($('td').slice(-2))

http://jsfiddle.net/g9xnsus5/2/

如何使用javascript将标记插入表中

2 个答案: