Question

我正在尝试使用下面的pre-element HTML，并将其转换为下面的post-element HTML。如果使用thead和tfoot作为post元素没有意义，那么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>

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

Answer 2

你应该选择thead，tbody和tfoot并用div或table包装它们。然后在tbody之后移动。

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

Answer 3

我仍然不知道这是否比上述两个伟大的解决方案更好，但目前我正在做的事情。 Š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/

使用jquery转换表结构

3 个答案: