Jquery 构建表的更有效方法？

我必须将表格的html发送到html到pdf转换脚本。我的表格必须由表1中的

、表3中的

和表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   
});

$（文档）.ready（函数（）{
var html=$（'div.dataTables_scroll'）.html（）；//以便更改不会影响主页面
var h=$（html.find（'thead'）[0]；
var f=$（html.find（'tfoot'）[1]；
var b=$（html.find（'tbody'）[0]；
var newtable=$（''）.append（h，f，b）；
var d=$（''）.append（新表）；
$（'#foo'）.val（d.html（））；//查看html的外观
});

这是整件事的一部分。它工作得很好，但我认为应该有一个更优雅的方式

---

想法？

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

---

但是，如果您需要构建一个由许多行、单元格等组成的大型表（或多个表），我建议您离线进行；也就是说，将所有部分组装到一个普通的旧字符串缓冲区中，并在构建完成后将其插入DOM中。这样，您就不会因为重复写入DOM而降低浏览器的速度，这可能会非常昂贵。

它看起来非常可靠。我真的不认为有比这更有效、更优雅的方式来处理桌子了。如果您愿意，可以这样重写它，使其更加明确：

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

$（文档）.ready（函数（）{
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=$（''）.append（thead、tfoot、tbody）；
var result=$（''）.append（newTable.html（）；
$（'#foo'）.val（结果）；
});

---

关于性能我不能说太多，但它更具可读性。

制作中间表和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);
});

$（文档）.ready（函数（）{
var$target=$（'div.dataTables_scroll'）；
var html=”“+$target.find（'thead'）.eq（0.html（）+”；
html++=“++$target.find（'tfoot'）.eq（1.html（）+”；
html++=“target.find（'tbody'）.eq（0.html（）+”；
$（'#foo'）.val（html）；
});

这个怎么样：

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

var ctx=$（'div.dataTables_scroll'）[0]；
变量html=[
'',
''+$（'thead'，ctx.eq（0.html（）+''，
'+$（'tfoot'，ctx.eq（1.html（）+''，
'+$（'tbody'，ctx.eq（0.html（）++'，
''
].加入（“”）；

属于：@Diodeus:codereview似乎仍处于测试阶段。这可能就是为什么我不知道它的存在。你的论点是正确的。但在这种情况下，有一些情有可原的情况。我从中获取的表是原始表的DataTables（）处理的输出。因此，要创建服务器端版本，我必须在服务器端复制DataTable插件，至少部分复制。此外，服务器脚本还需要知道用户应用的任何修改，如过滤器或排序顺序。