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＆gt; 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'));

现场演示here

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( );

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

4 个答案: