总结过滤后的html列需要很多时间，如何加快速度？

Question

凭借我在 javascript 中非常基本的“知识”，我编写了以下通用函数来总结过滤列（即过滤列的可见

<td>

元素的内容）。未过滤的表大约有 2000 行和 55 列。该函数有以下参数：

• tabID：是表的ID

• colNum：选择要过滤和求和的列数

• colS：是列的ID

• rec：仅指示总和是否需要转换，例如从 kWh 到 GWh（rec 为 1'000'000）

一旦通过 html 表中的下拉列表进行选择（更改时），该函数就会执行。

问题是我需要很长时间（大约1-2分钟）才能得到结果。有没有一个执行速度更快的解决方案（我能理解）？

由于页面本身和表格是动态创建的，我只能提供屏幕截图。希望有助于更好地理解？

截图 1、截图 2、截图 3

function htmlTableColSum(tabID, colNum, colS, rec) {
  var table = document.getElementById("" + tabID + "");
  var sumCol = 0;
  let count = $('#' + tabID + ' tbody tr').length;

  for (var i = 1; i < count - 1; i++) {
    if ($('#' + tabID + ' tbody tr:eq(' + i + ')').is(':visible')) {
      if (table.rows[i].cells[colNum].innerHTML !== "") {
        sumCol = sumCol + parseInt(table.rows[i].cells[colNum].innerHTML);
      }
    }
  }
  
  sumCol = sumCol / rec;
  if (rec > 1) {
    sumCol = sumCol.toFixed(2)
  }
  
  document.getElementById("" + colS + "").innerHTML = "" + sumCol;
}

Answer 1

您可以尝试以下方法。原理相同，只是代码性能发生一些变化

function htmlTableColSum(tabID, colNum, colS, rec) {
  var sumCol = 0;
  var visibleRows = $('#' + tabID + ' tbody tr:visible');
  var count = visibleRows.length;

  visibleRows.each(function(i, row) {
    var cellValue = row.cells[colNum].innerHTML;
    if (cellValue !== "") {
      sumCol += parseInt(cellValue);
    }
  });

  sumCol /= rec;
  if (rec > 1) {
    sumCol = sumCol.toFixed(2);
  }

  document.getElementById(colS).innerHTML = sumCol;
}

话虽这么说，如果没有某种模拟数据集来填充 DOM 来进行任何测试，我就无法对其进行物理测试。