jquery - 以编程方式在现有 html 标记之间插入 html 标记

Question

这是我的代码。

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>           
    </tbody>
</table>

我想</tr><tr>在运行时以编程方式在行之间添加：

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>
    <tr>
            <td>Some Data</td>
            <td>Some Data</td>
    </tr>           
    </tbody>
</table>

我试过$('tr td').eq(1).after('</tr><tr>');了，但它反而给了：

<table>
    <tbody>
        <tr>
            <td>Some Data</td>
            <td>Some Data</td>
        </tr/>
        <tr/>
            <td>Some Data</td>
            <td>Some Data</td>
        </tr>           
    </tbody>
</table>

那么，我怎样才能实现所需的功能呢？

Answer 1

您需要将行分成两部分。您可以使用以下方法执行此操作：

​$(function() {
    $('tbody tr').each(function() {  
        var cells = $(this).children('td'),
             row1 = $('<tr />'),
             row2 = $('<tr />');

        row1.append(cells[0]).append(cells[1]);
        row2.append(cells[2]).append(cells[3]);

        $(this).replaceWith(row1.add(row2));
    });​​​​​​​
});

请在此处查看示例 jsFiddle > http://jsfiddle.net/ayYa5/

Answer 2

在字符串操作方面，您正在插入"<tr></tr>".

然而，就 DOM 操作而言，您正在创建一个新的 tr 并将原始的两个孩子移动到它。如果使用 DOM 操作工具，则必须遵循 DOM 操作逻辑。

$('tr').eq(0).after('<tr></tr>');
$($('tr td').eq(1).nextAll()).appendTo($('tr').eq(1));

Answer 3

我想出了这个：

$('<tr></tr>').appendTo($('tbody'));
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child'));
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child'));

现场演示在这里

Answer 4

好吧，这在很大程度上取决于您拥有的数据格式，但您可以尝试以下方法：

$( "td" ).unwrap( );

var wrap_tds = function( ) {
    var els = $( "tbody" ).children( "td:lt(2)" );
    if (els.length) {
        els.wrap( "tr" );
        wrap_tds( );
    }
};
wrap_tds( );