Проблемы с производительностью IE6 с добавлением className для нескольких элементов (плагин jQuery tableHover)

Question

В приложении, которое я пишу, которое использует большую таблицу таблиц HTML, для дизайна требуется, чтобы строка и столбец зависшей ячейки были выделены.

Я разрабатываю все JS для этого проекта с помощью jQuery 1.3.x, и я нашел плагин tableHover, который делает именно то, что мне нужно.

Но:

на IE6 производительность этого плагина падает вниз, как количество клеточных элементов подняться до точки, где страница почти не реагирует.

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

После отладки кода я теперь знаю, что при выборе большого количества элементов, а также применение Classname (jQuery.addClass()) крайне медленно на IE6.

Я пытался использовать jQuery.css() вместо только цвета фона, производительность лучше, но опять же, когда число ячеек таблицы расти производительность падает до нерабочего состояния, и на все в других браузерах производительность jQuery.css() намного медленнее, чем jQuery.addClass().

Основная проблема здесь заключается в том, что не существует общего родителя в столбец таблицы, поэтому для того, чтобы стиль столбца нужно пройти всю таблицу, выберите каждую строку, а затем найти правильный п-й ребеноктд. мой JQuery код для этого выглядит следующим образом:

//col_num is the current td element 
//table is the parent table  
var col_num = cur_cell.prevAll().length + 1; 
var this_col = $('tr td:nth-child(' + col_num + ')', table); 

Я не буду вставлять весь мой код здесь, потому что это не имеет значения для данного вопроса. Единственный ответ, который я ищу, - это: Есть ли известный способ сделать то, что мне нужно, в лучшем качестве? Я не ищу скорость работы Chrome, просто что-то быстрее, чем «не реагирует».

Thnaks

Tom.

Answer 1

Я столкнулся с сложностью работы jquery на очень больших таблицах в IE6. Вот что я могу предложить вам в плане помощи:

• закодировать столько данных в HTML, как это возможно. например, кодировать номер и Col номера строк в TDs класса или имя атрибута
• добавить прослушиватель мыши в всего таблицы, а затем использовать event.target, чтобы получить ТДС
• разобрать расположение из ячейке, вы снова наводите форму на точку # 1
• , вам, вероятно, придется добавить тонну классов, но у вас есть класс для каждого столбца и каждой строки, таким образом вы можете выбрать как целую строку, так и целую колонку с помощью двух селекторов классов , и добавить css к ним
• кеш как можно больше. если пользователь переместится из одной ячейки в другую, проверьте, была ли она в строке, которую вы уже выделили. я думаю, что это в значительной степени гарантированно произойдет, так что вы будете иметь 1/2 операции селектор
• кэш целиком выбранные столбцы, так что вам не придется дважды выбирать, то же самое для строк
• проверить эту отзывчивость plugin я написал, вы можете использовать его.
• также есть another сообщение я написал на тему написания быстрых плагинов jquery.

Answer 2

Интересно, хотите ли вы в поисках лучшей отзывчивости из jQuery, вы не видите лес для деревьев?

Почему вы не включаете элемент <colgroup> в верхней части таблицы (явно или, если необходимо, путем динамического добавления его с помощью jQuery), а затем присваиваете значение цвета фона столбцу, соответствующему индексу выбранной ячейки?

IE6 поддерживает элемент <colgroup>, но только в ограниченных количествах. Тем не менее, фоновый цвет является одним из поддерживаемых, поэтому это должно означать значительное улучшение вашей производительности.

Answer 3

Я должен был отметить это - я намного лучше CSS/HTML-разработчик, чем Javascript, я пробовал каждый метод, отличный от сценария, который я знаю, прежде чем врываться в JS.

Я на самом деле начал с COLGROUP, я даже использовать его для ширины столбцов на одной и той же таблицы, но элементы COLGROUP и Col устанавливаются визуально за элементов таблицы, так что если TBODY, тр, td или любой другой элемент в таблице имеет фон (который, в моем случае, многие из них есть), colgroup не будет отображать эти элементы и не реагирует на позиционирование или любые другие продвинутые манипуляции с CSS Я попытался применить это.

Answer 4

Уменьшите количество изменений типа className и последующие пересчеты, предоставив браузеру соответствия CSS браузеру работу для вас. Например, для 3x3 таблицы:

<style type="text/css"> 
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td, 
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 { 
     background: red; 
    } 
</style> 

<table id="foo"> 
    <tr class="row-0"> 
     <td class="col-0">a</td> 
     <td class="col-1">b</td> 
     <td class="col-2">c</td> 
    </tr> 
    <tr class="row-1"> 
     <td class="col-0">d</td> 
     <td class="col-1">e</td> 
     <td class="col-2">f</td> 
    </tr> 
    <tr class="row-2"> 
     <td class="col-0">g</td> 
     <td class="col-1">h</td> 
     <td class="col-2">i</td> 
    </tr> 
</table> 

Теперь все, что вам нужно сделать, это установить Classname на внешней таблицы к «Сель-row- (NUM) Сель-коллектив- (число)» и все клетки обновление сразу, что будет намного быстрее, чем циклов и настроек классов.

Для очень большого количества столбцов/строк количество данных в таблице стилей может стать громоздким. Вы можете обойти это немного, динамически изменяя правила в таблице стилей через список document.styleSheets, но для этого требуется некоторая кросс-браузерная работа, с которой jQuery вам не поможет. Или для таблицы с, скажем, многими строками, но несколькими столбцами, вы можете поместить класс выбранной строки непосредственно в строку, и только колонка выделяется таким образом, которая остается только 2-3 изменениями класса.

(Было бы хорошо, если бы мы могли использовать селектор п-го ребенка CSS3, как вы делали в селекторе JQuery, но поддержка браузера пока не существует.)