Интеграция сортировщика таблиц jQuery, чередования зебр и выделения строк

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

У меня есть две проблемы, поэтому я разместил одну в этом посте, а другую в предыдущем посте.

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

Мне нужно иметь возможность (1) полосать таблицу зеброй; (2) сортировать таблицу; и (3) выделить строку, над которой в данный момент находится курсор. Я могу сделать полоску зебры с помощью CSS, без проблем. И я также могу реализовать функциональность выделения строки (в некоторой степени) с помощью CSS.

Но когда сортировка таблиц реализована (с использованием сортировщика таблиц jQuery), строки не «перерисовывают» стиль, поэтому я получаю группы светло-серых строк и белых строк, а не чередование зебры.

Кроме того, при таком подходе подсветка строк работает только с белыми строками (класс CSS не применяется).

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

Вот код в его нынешнем виде:

$("#resultsTbody").html(response);
$("#resultsTbl").tablesorter();
var $rows = $(".stripeMe tbody tr");
$rows.hover(
  function() { $(this).addClass("currRow"); } // <--- error flagged here
  function() { $(this).removeClass("currRow"); }
);

И ошибка, которую я получаю, находится в указанной строке кода. Ошибка:

SyntaxError: отсутствует ) после списка аргументов


jquery highlight tablesorter zebra-striping
person CoMo G-Dawg    schedule 17.09.2012    source источник
comment
Ладно, нашел проблему с ошибкой в ​​этом коде - напрягая свои не очень молодые глаза. В конце указанной строки должна стоять запятая. Исправлено. Что касается чередования/выделения/сортировки, которые не работают хорошо, я все еще потерян.   -  person CoMo G-Dawg    schedule 17.09.2012
comment
Если вы решаете свои собственные вопросы, добавьте свой ответ, используя форму ниже, а затем отметьте его как выбранный ответ.   -  person Dai    schedule 17.09.2012

Ответы (2)


arrow_upward
2
arrow_downward

Я бы просто пошел с tr:nth-child:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}​

нет необходимости в JS. Также зависание:

 tr:hover{ cursor:pointer; background:#EEE}
person moonwave99    schedule 17.09.2012
comment
Спасибо за ответ. Я пробовал те. Подобный CSS работал до тех пор, пока таблица не была отсортирована, а потом у меня все пошло не так. Ряды несли с собой классы. И, как уже отмечалось, CSS для изменения строки работал только с строками без уже назначенного другого класса — или только с половиной строк. - person CoMo G-Dawg; 17.09.2012
comment
Это работает даже при сортировке — избавьтесь от всех классов .odd и .even. - person moonwave99; 17.09.2012
comment
CSS - лучший ответ. Чтобы удалить нечетные и четные имена классов, очистите имена классов в этой опции: widgetZebra:{css:["",""]} - person Mottie; 20.09.2012

arrow_upward
2
arrow_downward

* Я СЧИТАЮ, ЧТО Я РЕШИЛ ЭТО * Я считаю, что решил все это!

В мой CSS добавлено следующее

.odd{ background: #DDDDDD; } 
.even{ background: #FFFFFF; }

Нашел это немного в малоизвестной части документации по виджету.

Затем остальная часть моего сценария выглядела так

$(".stripeMe").tablesorter({ widgets: ['zebra'] });
var $rows = $(".stripeMe tbody tr"); 
$rows.hover( function(){ 
  $(this).addClass("currRow"); 
  $(this).css("cursor","pointer"); }, 
function(){ 
  $(this).removeClass("currRow");
  $(this).css("cursor","auto"); } 
);
person CoMo G-Dawg    schedule 19.09.2012