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/