Проверьте, есть ли в таблице tr класс, затем удалите и добавьте новый класс для события Hover. - PullRequest
Новая
       10

Проверьте, есть ли в таблице tr класс, затем удалите и добавьте новый класс для события Hover.

0 голосов
/ 02 марта 2010

Я пытаюсь выделить строки таблицы при наведении мыши. Каждая строка (tr) уже имеет класс «четный» или «нечетный». Итак, чтобы выделить строку при наведении курсора мыши, мне нужно сначала удалить класс CSS «четный» или «нечетный» из строки. Пожалуйста, возьмите много за мой сценарий: 

$('tr').hover(function() {

  if ($('this').hasClass('even')) {
    $(this).removeClass('even');
    $(this).addClass('rowhover');
  }

  else {
    $(this).removeClass('odd');
    $(this).addClass('rowhover');
  }
},
function() {
  $(this).removeClass('rowhover');
});

Но это не работает. Можете ли вы указать мне на ошибку? Спасибо.

Обновление 1:

Я использовал этот toggleClass liket this 

$("tr").hover(function() {
$(this).toggleClass("rowhover");
});

Затем я использовал firebug, чтобы проверить элемент, tr получил класс, подобный этому: 

<tr class="even rowhover"> where it should be <tr class="rowhover">

Тот же результат, если я использую что-то вроде этого: 

$('tr').hover(function() {

    $(this).addClass('rowhover');
    },
 function() {
    $(this).removeClass('rowhover');        
});

Мой CSS для класса rowhover 

.rowhover {background:green !important;}

Обновление 2:

Я попробовал предложение от Джастина Джонсона: 

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
        },
    function() {
     $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
  });

Я проверил элемент с помощью FireBug, вот результат: 

//Notice the space in the class=" rowhover" when mouse hover
     <tr class=" rowhover">

 //Notice the space in the class=" even", class=" odd" when mouse out
 <tr class=" even"> or <tr class=" odd">

Обновление 3: работает!

Я последовал за публикацией в jQuery - Демонстрации и примеры плагина Tablesorter , но мне нужно было добавить! 

tr.overRow td { background-color:#FFFF99 !important; border :2px; }

Я добавил это правило в конец таблицы стилей для сортировщика таблиц, а затем использовал следующий скрипт для управления им: 

// Adds "over" class to rows on mouseover
$(".tablesorter tr").mouseover(function() { $(this).addClass("overRow"); });
// Removes "over" class from rows on mouseout
$(".tablesorter tr").mouseout(function() { $(this).removeClass("overRow"); });

Теперь все работает так, как задумано. Спасибо всем за предложение. Извините, что не упомянул, во-первых, что я использую плагин jQuery tablesorter, и я просто хочу выделить строку при событии hover.

: D

Ответы [ 6 ]

5 голосов
/ 02 марта 2010

Изменение 

if ($('this').hasClass('even')) {

до 

if ($(this).hasClass('even')) {

удалить кавычки вокруг this. Также вам нужно сбросить исходное состояние класса и , вы можете связать свои функции: 

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
},
function() {
    $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});
2 голосов
/ 02 марта 2010

Прежде всего, попробуйте создать цепочку ваших событий. 

$(this).removeClass('even').addClass('rowhover');

Во-вторых, зачем удалять эти классы? Если вы просто добавите класс, а затем переопределите его в CSS, объединив имена классов: 

.even { background:black; }
.even.rowhover { background:blue; }
0 голосов
/ 02 марта 2010

(в качестве альтернативы) вместо использования jQuery для этой функции, просто используйте встроенную функцию CSS

вместо использования класса rowhover в css используйте 

tr:hover
    {
        ...styles here
    }
0 голосов
/ 02 марта 2010

Эта строка вашего кода неверна: 

if ($('this').hasClass('even')) {

Вы цитируете ключевое слово this, попробуйте это: 

if ($(this).hasClass('even')) {
0 голосов
/ 02 марта 2010

Используете ли вы обычный "чистый" JavaScript? Мне кажется, что вы бы использовали библиотеку javascript (например, mootools).

0 голосов
/ 02 марта 2010

Вы можете просто оставить класс «четный» и «нечетный» и просто добавить / удалить класс «rowhover» при наведении курсора (так, например, выделенный TR будет иметь классы «even» и «rowhover»). Установите цвет фона (или что-либо еще, что вы используете для выделения строки) в "rowhover", чтобы он был "! Important" в вашем CSS для переопределения "четного" и "нечетного".

Таким образом, вам не нужно заботиться о том, какой класс у TR был раньше, и просто много кодировать, вы просто позвоните «add rowhover» при наведении курсора и удалите его при наведении мыши.

...