2

以下のプレ要素 HTML を取り、それを以下のポスト要素 HTML に変換しようとしています。post 要素に thead と tfoot を使用しても意味がない場合は、tbody が機能します。$('#myTable') から始めて、div でラップすることを考えています。ヘッダーとフッターを削除して適切なテーブルに挿入する方法に苦労しています。提案をありがとう。

プレ要素 HTML:

<table id="myTable">
    <thead>
        <tr>
            <th>H1</th>
            <th>H2</th>
            <th>H3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>F1</th>
            <th>F2</th>
            <th>F3</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>B1</th>
            <th>B2</th>
            <th>B3</th>
        </tr>
    </tbody>
</table>

投稿要素:

<div>
    <table class="header">
        <thead>
            <tr>
                <th>H1</th>
                <th>H2</th>
                <th>H3</th>
            </tr>
        </thead>
    </table>
    <div>
        <table id="myTable" class="body">
            <tbody>
                <tr>
                    <th>B1</th>
                    <th>B2</th>
                    <th>B3</th>
                </tr>
            </tbody>
        </table>
    </div>
    <table class="footer">
        <tfoot>
            <tr>
                <th>F1</th>
                <th>F2</th>
                <th>F3</th>
            </tr>
        </tfoot>
    </table>
</div>
4

3 に答える 3

1

ここ：

var $table = $( '#myTable' ).detach();

$( '<div />' ).append(
    $( '<table class="header" />' ).append( $table.children( 'thead' ) ),
    $( '<div />' ).append( $table.addClass( 'body' ) ),
    $( '<table class="footer" />' ).append( $table.children( 'tfoot' ) )
).appendTo( 'body' );

ライブデモ: http://jsfiddle.net/MYbc6/4/

DOM 操作操作の量が最小限に抑えられることを明示的に確認しました。つまり、テーブルが DOM から切り離され、次に DIV が構築され、最後に DOM に接続されます。

于 2012-11-12T00:41:31.597 に答える
1

thead、tbody、および tfoot を選択し、それらを div または table でラップする必要があります。そして、tbody の後に tfoot を移動します。

$table = $('#myTable');
$table.find('thead').wrap('<table class="header"></div>');
$table.find('tfoot').insertAfter($table.find('tbody'));
$table.find('tfoot').wrap('<table class="footer"></div>');
$table.find('tbody').wrap('<div><table id="myTable" class="body"></table></div>');
$table.wrap('<div></div>').replaceWith($table.html());

デモ: http://jsfiddle.net/F3MCv/2/

于 2012-11-12T00:51:49.840 に答える
0

これが上記の2つの優れたソリューションよりも優れているかどうかはまだわかりませんが、現在私が行っていることです。ŠimeVidasによるdetach（）の使用はおそらくより良いですが、変更されたHTMLを新しい場所に再挿入する方法がわかりません。

var $table = $('#myTable').addClass('body').wrap('<div />').wrap('<div />');
$table.parent()
    .before($('<table class="header" />').append($table.children('thead')))
    .after($('<table class="footer" />').append($table.children('tfoot')));

デモ： http： //jsfiddle.net/zuHLX/

于 2012-11-12T16:25:09.927 に答える