jQuery Slowness с подсветкой больших таблиц - PullRequest
Новая
       12

jQuery Slowness с подсветкой больших таблиц

2 голосов
/ 26 марта 2009

У меня есть небольшой фрагмент, который я использую для выделения строки на странице XSLT, для которой нужно использовать событие onclick для отправки некоторых данных, но поскольку строка не является ссылкой, я должен убедиться, что есть курсор в виде руки а также подсвечиваемая строка, чтобы пользователи понимали, что она кликабельна и в какой строке они находятся. 

<script type="text/javascript">
  $(document).ready(function() {
    $('#stocks tr:not(.exclude)').css('cursor', 'hand');
    $('#stocks tr:not(.exclude)').hover(function() {
      $(this).addClass('hover');
    }, function() {
      $(this).removeClass('hover');
    });
  });
</script>

Таблицы большие, обычно до 5000 строк. При большом количестве строк подсветка строк, используемая этим сценарием jQuery, идет довольно медленно. Я написал селектор tr:not(.exclude), но я думаю, возможно, именно поэтому он работает медленно? Любые идеи о том, как ускорить это?

РЕДАКТИРОВАТЬ : я вижу, что многие ответы очень хороши, однако они не учитывают тот факт, что по крайней мере более 5000 строк.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ : Вы ДОЛЖНЫ убедиться, что в IE7 как минимум установлен следующий тип документа, чтобы tr: hover работал. Моя все еще идет медленно, но это должно быть что-то еще. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Ответы [ 5 ]

3 голосов
/ 26 марта 2009

Этот эффект может быть достигнут только с помощью CSS. Попробуйте что-то вроде: 

#stocks tr:hover {
   cursor: pointer;
   background-color: khaki;
}

#stocks tr.exclude:hover {
   cursor: inherit;
   background-color: inherit;
}
2 голосов
/ 26 марта 2009

Медленно добавлять столько событий, выглядит как два для каждой строки. Вместо этого вам нужно использовать Делегирование событий . Вы можете сыграть свою роль, или, возможно, эта ссылка поможет. Основная идея заключается в том, что вы присоединяете только один или два обработчика событий к самой таблице, и в этих обработчиках вы смотрите информацию о том, какая строка была введена, и соответственно меняете представление.

1 голос
/ 26 марта 2009

Хорошо! Это должно сделать это: 

$(document).ready(function() {
    $('tr:not(.exclude)', '#stocks')
    .css('cursor', 'hand')
    .live("mouseover", function() {
        $(this).addClass('hover');
    }).live("mouseout", function() {
        $(this).removeClass('hover');
    });
});
0 голосов
/ 26 марта 2009

Я уверен, что в прямом эфире используется делегирование событий. Это может работать в зависимости от того, насколько ненадежным является наведение мыши.

попробуйте это: 

$(document).ready(function() {
    $('tr', '#stocks')
    .not('.exclude')
    .css('cursor', 'hand')
    .find('td')
    .live("mouseover", function(){

          $(this).hover(function() {
          $(this).parent('tr').addClass('hover');  
        }, function() {
            $(this).parent('tr').removeClass('hover');
            $(this).unbind();  ////not sure about this part
        });
         $(this).trigger('hover');
    });
});
0 голосов
/ 26 марта 2009
  1. Используйте EventDelegation, как предложено. Добавьте прослушиватель событий на стол. а также
  2. использовать явные цвета, например # dee9f3 (в отличие от "синего")
  3. Назначение стилей напрямую, а не с помощью переключателей CSS например,

row.style.backgroundColor = '# dee9f3';

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...