У меня есть таблица с событием jquery onClick на tr-строках. Я хочу выделить текущую выбранную строку. "Чтобы выделить" означает: изменить цвет фона и обычный шрифт на курсивный шрифт. Поэтому я создал класс "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");
}
}
};
Я думаю, вы можете уменьшить эту функцию:
var tableRowClickHandler = function () {
if ($(this).hasClass ("header")) {
return;
}
else {
$("tr").removeClass ("selected_row");
$(this).addClass ("selected_row");
}
};
Я решил проблему, не добавляя стили через класс, а двумя индивидуальными вызовами css(), устанавливая цвет и стиль шрифта. Это прекрасно работает, и этого достаточно для меня. Не знаю, почему он не работает с addClass().
$('.selected_row').removeClass('selected_row')
чтобы удалить все предыдущие вхождения этого класса