jQuery循环通过表行/表格单元性能

时间:2010-11-18 21:46:06

标签: jquery performance html-table tablerow tablecell

我有一个在document.ready上调用的函数,它遍历一个大约600行的表,这是在经典ASP中生成的。在“现代”浏览器(Chrome,Firefox,IE9 Beta)中,它运行时间不到1.5-2秒。在IE6中它运行大约5-7秒,不好。

基本上我正在做的是在某些列中添加单元格的值并给出小计。 (我知道,这应该在服务器端生成,但是一些brainiac使用调用视图的视图开发了这个视图,调用视图,调用视图...)。

我使用IE9的分析器试图了解瓶颈的位置,当jQuery的发现和每个被称为时,它似乎是最深刻的:

tr.find("td").each(function() {
&
tr.find("td").eq(ci).html(tot).css

如果有必要,我会发布所有代码,但我想知道是否有更有效的方法来循环未命名的表行和单元格?

表格如下:

32     47       0/0 0 8 1 1                 
32     47  -7   0/0 0 0   7 
Totals     -7   0/0   8 1 8  
32     47       0/0 0 2 1 1                 
32     47  -7   0/0 0 3   7 
Totals     -7   0/0   5 1 8  

我循环遍历表行,如果我找到(td:first)=“Totals”,那么我将当前的tr和前两个tr放在变量中,然后抓住单元格并计算总数,并将这些总数放入适当的细胞。

这一切都有效,但就像我说的那样,在发现期间每个都有一个严重的瓶颈。

1 个答案:

答案 0 :(得分:4)

我自己没有测试过,但是所有jQuery扩展都可能会减慢速度。尝试使用普通的JavaScript进行此操作,看看它是否加快了速度:

var rows = document.getElementById('your-table').rows;
var num_rows = rows.length;
for (var i = 0; i < num_rows; ++i) {
    var cells = rows[i].cells;
    if (cells[0].innerHTML == 'Totals') {
       var num_cells = cells.length;
       for (var j = 1; j < num_cells; ++j) {
           cells[j].innerHTML =
               (parseInt(rows[i-2].cells[j]) || 0) +
               (parseInt(rows[i-1].cells[j]) || 0);
       }
    }
 }