Question

I have to send html for a table to an html-to-pdf converter script. My table must be composed of the <thead> from table1, the <tfoot> from table3 and the <tbody> from table2. I’m putting together the html with jQuery. This is what I have:

$(document).ready(function() {
    var html = $('div.dataTables_scroll').html();//so that changes don't affect the main page
    var h = $(html).find('thead')[0];
    var f = $(html).find('tfoot')[1];
    var b = $(html).find('tbody')[0];
    var newtable = $('<table></table>').append(h, f, b);
    var d = $('<div></div>').append(newtable);
    $('#foo').val(d.html()); //to see what the html looks like   
});

Here‘s a JSFiddle of the whole thing. It works well enough, but I think there should be a more elegant way.

Ideas?

Answer 1

How about this:

var ctx = $( 'div.dataTables_scroll' )[0];

var html = [
    '<table>',
        '<thead>' + $( 'thead', ctx ).eq( 0 ).html() + '</thead>',
        '<tfoot>' + $( 'tfoot', ctx ).eq( 1 ).html() + '</tfoot>',
        '<tbody>' + $( 'tbody', ctx ).eq( 0 ).html() + '</tbody>',
    '</table>'
].join( '' );