更有效的建表方式？

Question

我必须将表格的html发送到html- to -pdf转换脚本。我的表必须由来自table1的<thead>、来自table3的<tfoot>和来自table2的<tbody>组成。我正在用jQuery把html放在一起。这就是我所拥有的：

$(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是一个完整的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

我不认为在构建表格时有任何真正的优雅。由于您只构建了一个表，因此我建议您坚持使用已有的解决方案。

但是，如果需要构造一个由许多行、单元格等组成的大型表(或多个表)，我建议脱机执行；即，将所有部分组装到一个普通的字符串缓冲区中，并在完成构造后将其插入到DOM中。这样，您就不会因为重复写入DOM而使浏览器变慢，这可能非常昂贵。