Converting table structure using jquery

Question

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>

Why not? My purpose is to fix the header, and CSS makes it difficult. — user1032531
– user1032531, Commented Nov 11, 2012 at 23:40
@ubercooluk Does that sound weird? :) I meant we should edit the source/markup instead of using JS, JS should be the final option. — Ram
– Ram, Commented Nov 12, 2012 at 1:11
@ubercooluk. I wish to keep the header and footer stationary, and scroll the tbody. I've come across only css solutions, but they are complicated and don't work with IE9. There are plugins, but I also want sort functionality, and they don't work with IE7+ — user1032531
– user1032531, Commented Nov 12, 2012 at 1:12

Šime Vidas · Accepted Answer · 2012-11-12 00:46:53Z

1

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.

edited Nov 12, 2012 at 0:46

answered Nov 12, 2012 at 0:41

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1032531 Over a year ago

And thank you Sime, Also, didn't know I got a response. Let me look at it. Thanks!

user1032531 Over a year ago

I've never used detach() before. Looks appropriate, however, it also looks like it might not go in the same location as the original #myTable.

Šime Vidas Over a year ago

@user1032531 Well, I've put the DIV in <body>. You have to make sure that it goes at the same location as the original table. That's just the downside of detaching.

user1032531 Over a year ago

Thanks. Trying but not successful figuring out how to put it back in the same location. Can you help>

Šime Vidas Over a year ago

@user1032531 Does the table in its original location have siblings? Or is it the only child?

|

halilb · Accepted Answer · 2012-11-12 07:38:57Z

1

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/

edited Nov 12, 2012 at 7:38

answered Nov 12, 2012 at 0:51

halilb

4,1251 gold badge25 silver badges32 bronze badges

4 Comments

Šime Vidas Over a year ago

You didn't achieve the desired structure - jsfiddle.net/F3MCv/1 (only the "header" table is in the DIV, and the "body" table is not wrapped in a second DIV)

halilb Over a year ago

thanks for the notice. i edited it on here and jsfiddle, the output is as desired now.

user1032531 Over a year ago

Thanks Halil, Didn't know I got a response. Let me look at it. Thanks!

Šime Vidas Over a year ago

@HalilBilir You still need to wrap the entire structure in an additional DIV.

user1032531 · Accepted Answer · 2012-11-12 16:25:09Z

0

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/

answered Nov 12, 2012 at 16:25

user1032531

26.5k77 gold badges248 silver badges422 bronze badges

Collectives™ on Stack Overflow

Converting table structure using jquery

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related