более эффективный способ построить стол?

Question

Мне нужно отправить html для таблицы в скрипт конвертера html-to-pdf.Моя таблица должна состоять из <thead> из таблицы1, <tfoot> из таблицы3 и <tbody> из таблицы2.Я собираю HTML с JQuery.Вот что у меня есть:

$(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   
});

Здесь JSFiddle всего этого.Это работает достаточно хорошо, но я думаю, что должен быть более элегантный способ.

Идеи?

Answer 1

Как насчет этого:

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

Answer 2

выглядит довольно солидно. Я не думаю, что есть более эффективный или элегантный способ работы со столами. Если вы хотите, вы можете переписать его так, чтобы сделать его немного более явным:

$(document).ready(function() {
    var tables = $('div.dataTables_scroll table');
    var thead = tables.eq(0).find('thead');
    var tfoot = tables.eq(1).find('tfoot');
    var tbody = tables.eq(2).find('tbody');

    var newTable = $('<table />').append(thead, tfoot, tbody);
    var result = $('<div />').append(newTable).html();

    $('#foo').val(result);
});

Я не могу много сказать о производительности, но она более читабельна.

Answer 3

Создание промежуточной таблицы и div не нужны.Запишите информацию, поставьте ее там, где хотите.Не играйте между ними.

$(document).ready(function() {
    var $target = $('div.dataTables_scroll');
    var html = "<table><thead>" + $target.find('thead').eq(0).html() + "</thead>";
    html += "<tbody>" + $target.find('tfoot').eq(1).html() + "</tbody>";
    html += "<tfoot>" + $target.find('tbody').eq(0).html() + "</tfoot></table>";
    $('#foo').val(html);
});

jsFiddle

Answer 4

Я не думаю, что существует какая-то настоящая элегантность , когда дело доходит до построения таблиц.Поскольку вы просто строите одну таблицу, я бы предложил придерживаться решения, которое у вас уже есть.

Если, однако, вам нужно построить огромную таблицу (или несколько таблиц), состоящую из множества строк, ячееки что угодно, я бы предложил сделать это офлайн ;то есть, собирая все части в простой старый строковый буфер, и вставляя его в DOM, как только вы закончите его создание.Таким образом, вы не замедляете работу браузера, постоянно записывая в DOM, что может быть ужасно дорого.