1

これは私のコードです。

<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

4 に答える 4

4

行を 2 つに分割する必要があります。以下を使用してこれを行うことができます。

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

于 2012-10-31T10:14:06.080 に答える
1

文字列操作に関しては、挿入して"<tr></tr>"います。

ただし、DOM 操作に関しては、新しい tr を作成し、元の 2 つの子をそこに移動しています。DOM 操作ツールを使用する場合は、DOM 操作ロジックに従う必要があります。

$('tr').eq(0).after('<tr></tr>');
$($('tr td').eq(1).nextAll()).appendTo($('tr').eq(1));
于 2012-10-31T10:13:22.390 に答える
0

まあ、それはあなたが持っているデータのフォーマットに大きく依存します、しかしあなたが試すことができるものはここにあります：

$( "td" ).unwrap( );

var wrap_tds = function( ) {
    var els = $( "tbody" ).children( "td:lt(2)" );
    if (els.length) {
        els.wrap( "tr" );
        wrap_tds( );
    }
};
wrap_tds( );
于 2012-10-31T10:18:05.177 に答える
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'));

ライブデモはこちら

于 2012-10-31T10:17:43.727 に答える