javascript - 根据属性加快修改表格单元格的范围(行/列选择)

Question

我正在编写一个基本上显示大量表格的 jQuery 可用性日历。有多大？过去两年、今年和 future 两年的每一天都有三十四行一列。我会为您计算一下:超过 62,000 个表格单元格。

是的，加载速度有点慢，但一旦加载，日历就完全符合我们的需求。只有一个问题:

用户需要能够选择一个单元格 block 。我在 UI 中设置了所有内容，以允许用户在一组单元格周围绘制一个框，选择框内的所有单元格。真正将它们标记为“选中”的过程非常缓慢。这是我使用的循环代码:

while(r<=thisRow) {
            for(var c=startColumn;c<=thisColumn;c++) {
                if($(".calendar_slot[row="+r+"][column="+c+"]").attr('selectable')=='YES') {
                    if (toggleDirection==0) { $(".calendar_slot[row="+r+"][column="+c+"]").removeClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html(''); }
                    if (toggleDirection==1) { $(".calendar_slot[row="+r+"][column="+c+"]").addClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html($(".calendar_slot[row="+r+"][column="+c+"]").attr('label')); }
                }

            }
            r++;
}

如您所见，我必须根据列和行自定义属性的值进行选择。我无法将这些嵌入到单元格的 ID 中，因为有另一个进程已经在使用 ID 值对速度有同等的需求。如果 ID 值包含行和列信息，则此其他函数将中断，然后将需要使用自定义属性，因此会遇到与我在这里遇到的相同问题。

有没有办法加快这个选择过程？循环本身不会花费很长时间(如果我注释掉 jQuery 内容，它运行得非常快)。所以我需要一种方法来强制 jQuery 根据自定义属性的值更快地执行这些任务。

有什么想法吗？

Answer 1

tldr; 不要尝试逐列选择每个元素，尤其是对于必须煞费苦心地搜索许多元素和相应属性的选择器。

这就是我最初尝试解决它的方式:

首先，使用 jQuery 选择第一行 - 即 row = $("#calendar .calendar_slot:first")[0] 或任何合适的内容。然后，使用 nextSibling 遍历 DOM 节点.到达最后选择的行索引时停止迭代。在行支配列的假设下，此循环操作必须相对较快，这就是为什么我推荐简单的 DOM 操作和“范围扫描”。 (或者，这可能在使用 next sibling selector 和/或 range selectors 和/或 jQuery.slice 的 jQuery 选择器语法中可行。)

对于上面迭代的每一行，使用类似于:

$(row).children(".calendar_slot[selectable]").each(function () {
  var colNum = +this.column
  if (colNum > x && colNum < y) {
    var col = $(this)
    // do stuff with col here: only wrapped once!
  }
}

请注意，选择器每行只执行一次；另外只需要看child elements .与迭代上面的行不同，“较慢”的 jQuery 在这里就足够了，因此应该是首选。

另外，考虑 jQuery Range Selectors ;我会尝试这两种方法，看看哪种方法可以满足您的目标。范围选择器可能会完全削弱我对上面选择行的建议，它们可能会对列选择器做出很好的补充并消除显式条件。