如何使用JavaScript將標記插入表格

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>"被解釋為：

1. 表格行的結束標記不存在，請忽略此
2. 創建表格行

您需要創建一個表行，將其放置在所需位置，然后將表單元格移入其中。

可能是這樣的：

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/