0

我有一个很大的表（我需要显示超过 4000 行），我需要为每行（例如）第 4 个单元格添加一些类。我的代码可以在大约 800 毫秒内完成。但我需要这样做 2 次（对于另一列和另一类），所以用户必须等待很长时间。

伙计们，如果我错过了一些昂贵的时间，你能看看我的代码吗？我最好的想法是那段代码：

// $(td) - is a cell in header that was clicked
// index = column number to add class
var countColumns = $(td).closest("table").find("tr:last").children("td").length;
var $childrenTD = $(td).closest("table").find("tr").not("headrow").children("td");
for(var i=index; i<$childrenTD.length; i+=countColumns) {
    $($childrenTD[i]).addClass(cssClass);
}
4

2 回答 2

3

在我看来，您可以简单地执行以下操作：

$(td).closest("table")
    .find("tr:not(.headrow) td:nth-child(" + index + ")")
    .addClass(cssClass);

在这里，您选择td:nth-child(4)，它是td其父项（行）的第四个子项。

于 2012-11-21T04:19:49.897 回答
0

首先... Ben Alpert 的回答很好，并且可能是可以接受的。

如果您仍然发现性能或速度存在问题，我建议您使用“老式方式”......使用 vanilla JavaScript 和 DOM 遍历：

这是一个小提琴。我在这里使用了混合 JQuery/vanilla-js 代码来跳过任何昂贵的查询。

$('td').click(function() {
    //get all the trs in the table.
    var trs = this.parentElement.parentElement.parentElement.getElementsByTagName('tr');

    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if ($(tr).hasClass('headrow')) continue;
        var fourth = tr.getElementsByTagName('td')[3];        
        $(fourth).addClass('someclass');
    }
});​

如果不制作一些自定义函数来添加和测试来自 DOM 的类，它不会比这快很多，这很痛苦。

编辑：这是一个 100% vanilla JS 解决方案的小提琴

这是它的 100% vanilla 版本（我没有在 IE 中测试过）：

function bindAllElements(elements, eventName, fn) {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.addEventListener(eventName, fn);
    }
}

function hasClass(element, className) {
    if (typeof element.className === 'undefined') return false;
    return element.className.indexOf(className) >= 0;
}

function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += ' ' + className;
    }
}

var alltds = document.getElementsByTagName('td');

bindAllElements(alltds, 'click', function(e) {
    var td = e.target || event.srcElement;
    var table = td.parentElement.parentElement.parentElement;
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if (!hasClass(tr, 'headrow')) {
            addClass(tr.getElementsByTagName('td')[3], 'someclass');
        }
    }
});​

EDIT2：嗯，这是一个有趣的挑战......这是一个展示 VanillaJS/Jquery/Hybrid 性能的 jsperf。

它表明 VanillaJS 版本的速度大约是其他建议方式的两倍。

于 2012-11-21T04:44:27.340 回答