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

时间:2012-10-31 10:06:10

标签: jquery html

这是我的代码。

<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>

那么,我该如何实现所需的功能?

4 个答案:

答案 0 :(得分:4)

您需要将行拆分为两行。您可以使用以下方法执行此操作:

​$(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/

答案 1 :(得分:1)

就字符串操作而言,您正在插入"<tr></tr>"

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

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

答案 2 :(得分:0)

我想出了这个:

$('<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

答案 3 :(得分:0)

嗯,这在很大程度上取决于您拥有的数据格式,但这是您可以尝试的内容:

$( "td" ).unwrap( );

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