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

您应该选择thead、tbody 和tfoot 并用div 或tables 包裹它们。然后在 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 回答
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 回答
0

我仍然不知道这是否比上述两个出色的解决方案更好，但这是我目前正在做的事情。Šime Vidas 使用 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 回答