jQuery 循环遍历 TableRows/Table Cells 性能

发布于 2024-10-03 02:15:24 字数 851 浏览 8 评论 0原文

我有一个在 document.ready 上调用的函数，该函数循环遍历在经典 ASP 中生成的大约 600 行的表。在“现代”浏览器（Chrome、Firefox、IE9 Beta）中，它的运行时间不到 1.5-2 秒。在 IE6 中，它的运行时间约为 5-7 秒，不太好。

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

我使用 IE9 的分析器来尝试了解瓶颈在哪里，当 jQuery 的 find 和 every 被调用时，它似乎是最深刻的：

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 放入变量中，然后抓取单元格并计算总计，然后将它们放入总计在适当的单元格中。

这一切都有效，但就像我说的那样，在查找和每个过程中都存在严重的瓶颈。

原文

I have a function that is called on document.ready that loops through a table with roughly 600 rows that was generated in classic ASP. In a "modern" browser (Chrome, Firefox, IE9 Beta) it runs in under 1.5-2 seconds. In IE6 it runs in around 5-7 seconds, not good.

Basically what I'm doing is adding the value of the cells in certain columns and giving subtotals. (I know, this should be generated on the server-side, but some brainiac developed this using views that calls views, who call views, who call views...).

I used IE9's profiler to try to get a sense of where a bottle neck is and it seems to be most profound when jQuery's find and each is called:

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

I will post all of the code if necessary but I was wondering is there a more efficient way of looping through unnamed table rows and cells?

The table looks like:

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

I loop through the table rows and if I find a (td:first) = "Totals" then I place the current tr, and the two previous tr's in variables, then grab cells and calculate totals, and place those totals in the appropriate cells.

This all works but like I said there is a serious bottle neck during find and each.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枯寂 2024-10-10 02:15:24

我自己还没有测试过，但所有 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);
       }
    }
 }

I haven't tested it myself, but it's possible that all the jQuery extensions are what's slowing things down. Try doing this with plain javascript and see if it speeds things up:

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

回复收藏 0 原文

~没有更多了~