更有效的方式来建立一个表？

我必须发送表格的html到html-to-pdf转换器脚本。我的表必须由来自表1的<thead>，来自表3的<tfoot>和来自表2的<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。它工作得不错，但我认为应该有一个更优雅的方式。

想法？

来源

2012-01-11 dnagirl

属于上：http://codereview.stackexchange.com/ – 2012-01-11 19:39:14

@Diodeus：代码审查似乎仍处于测试阶段。这可能就是为什么我不知道它的存在。 – dnagirl 2012-01-11 19:44:03

如何：

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

来源

2012-01-11 19:59:06

我不认为有任何真正的优雅当涉及到构建表。既然你只是建立一张桌子，我建议你坚持你已有的解决方案。但是，如果你需要构建一个由许多行，单元格和其他组成的巨大表格（或多个表格），我建议你这么做offline;也就是说，将所有的部分组装成一个普通的字符串缓冲区，并在完成构建后将其插入到DOM中。这样你就不会通过反复写入DOM来减慢浏览器的速度，这可能非常昂贵。

来源

2012-01-11 19:43:35 karim79

你的论据很有道理。但在这种情况下，情况会有所减轻。我从中收获的表格是DataTables（http://datatables.net/）处理原始表格的输出。所以要创建一个服务器端版本，我必须基本上复制DataTable插件，至少部分在服务器端。同样，服务器脚本需要知道任何用户应用的修改，如过滤器或排序顺序。 – dnagirl 2012-01-11 19:57:05

它看起来很稳固。真的，我认为没有更高效或优雅的表格工作方式。如果你愿意，你可以把它改写这样让它多一点明确：

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

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

来源

2012-01-11 19:48:37 PPvG

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

来源

2012-01-11 19:49:26 Sinetheta

更有效的方式来建立一个表？

回答

相关问题