jquery addClass 仅应用于每隔一个表行

Question

我有一个表，在 tr 行上有一个 jquery onClick 事件。我想突出显示当前选定的行。 “高亮”是指:将背景颜色和普通字体改为斜体。所以我创建了一个类“selected_row”，并在 onClick 中将该类添加到行中。之前，我从所有其他行中删除该类，以便从以前突出显示的行中删除突出显示。问题是它工作正常但仅适用于每一行。这是在 IE8 中运行的。我正在使用 IE8 中的开发人员工具进行检查，虽然 selected_row 类确实适用于索引为 1、3、5 的每一行并且在那里可见，但它未在 DOM 树中应用或可见在调试器中索引为 0、2、4 的行...我一无所知。索引为奇数和偶数的行之间没有任何区别。

部分代码如下:

table th {
    background-color: #ededed; 
    padding: 5px;
}
table td {
    padding: 5px;
}
.selected_row {
    font-style: italic;
    background-color: #eeeeee;
}

JavaScript:

var tableRowClickHandler = function () {
    if ($(this).hasClass ("header")) {
        // alert ('has class');
    }
    else {
        var _this = $(this)
        if (_this.hasClass ("selected_row")) {
            _this.removeClass ("selected_row");
        }
        else { 
            $("tr").each (function () {
            if (!$(this).hasClass ("header"))
                $(this).removeClass ("selected_row");
            });
            _this.addClass ("selected_row");
        }
    }
};

Answer 1

我认为你可以把这个函数做得更小:

var tableRowClickHandler = function () {
    if ($(this).hasClass ("header")) {
        return;
    }
    else {
        $("tr").removeClass ("selected_row");
        $(this).addClass ("selected_row");
    }
};