user1032531
user1032531

Reputation: 26281

Converting table structure using jquery

I am trying to take the below pre-element HTML, and convert it to the below post-element HTML. If using thead and tfoot for the post element doesn't make sense, then tbody would work. I am thinking of starting with $('#myTable') and wrapping it with a div. I am struggling with how to best remove the header and footer, and insert them in their appropriate tables. Thanks for any suggestions.

Pre-element 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>

Post element:

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

Upvotes: 2

Views: 441

Answers (3)

user1032531
user1032531

Reputation: 26281

I still don't know whether this is any better than the above two great solutions, but it is currently what I am doing. Šime Vidas's use of detach() is probably better, but I do not know how to re-insert the modified HTML at the new location.

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')));

Demo: http://jsfiddle.net/zuHLX/

Upvotes: 0

halilb
halilb

Reputation: 4115

You should selects thead, tbody and tfoot and wrap them with div or tables. And then move tfoot after 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());

Demo: http://jsfiddle.net/F3MCv/2/

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185933

Here:

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' );

Live demo: http://jsfiddle.net/MYbc6/4/

I explicitly made sure that the amount of DOM manipulation operations is minimized, i.e. the table is detached from the DOM, then the DIV is constructed, and lastly attached to the DOM.

Upvotes: 1

Related Questions