Я взял таблицу html, в которой я применяю альтернативные цвета строк, и я добавил сортировщик таблицы jquery, чтобы пользователи могли сортировать таблицу.
Проблема в том, что альтернативные цвета строк теперь перепутаны как (на основе сортировки) есть несколько строк с тем же цветом фона.
Есть ли способ reset альтернативного цвета строки с сортировщиком таблицы jquery?
В уже созданном по умолчанию виджет zebra, встроенный в ядро, который применяет классы odd и even для чередования строк. Он работает независимо от того, добавили ли вы class=even/odd в html файл.
Это очень легко настроить. Я просто выполнил инструкции на веб-сайт сортировщика таблиц, а затем изменил функцию готовности документа к следующему:
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({
widgets: ['zebra']
});
}
);
</script>
Я сделал пример, отвечая на вопрос. Вы можете просмотреть результат в действии или посмотреть пример кода.
Основанный на ответе Энтони, но перефразированный как однострочный (в основном):
function fixStripes() {
$('table tr').removeClass('odd even')
.filter(':even').addClass('even').end()
.filter(':odd').addClass('odd');
}
$("table").bind("sort", fixStripes);
Вызовы JQuery могут быть "закованы в цепочку", как указано выше, используя операции типа filter() для ограничения выбранных элементов и от .end() до "reset" до последнего выбора. Иными словами, каждый .end() "отменяет" предыдущий .filter(). Окончательный .end() не используется, так как после этого делать нечего.
Чтобы сохранить полоски зебры после сортировки, вам нужно снова вызвать виджет зебры.
$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
$("#myTable").trigger("applyWidgets");
});
Это меньше взлома, так как вы будете повторно использовать логику виджета зебры, а не реплицировать ее.
Примечание. Этот вид работы требуется только в тех случаях, когда виджет по умолчанию zebra не работает. В большинстве случаев я обнаружил, что этот хак не требуется, так как виджет работает корректно.
Как насчет:
function fixStripes() {
var i = 0;
var rowclass;
$("table tr").each(function() {
$(this).removeClass("odd even");
rowclass = (i%2 == 1) ? "odd" : "even";
$(this).addClass(rowClass);
});
}
$("table").bind("sort", fixStripes);
О, и если вы хотите действительно простое исправление, вы можете задержать дыхание для этого псевдо-класса CSS, чтобы его подхватили все основные браузеры:
table tr:nth-child(n+1) {
color: #ccc;
}
Но моя догадка основана на том, как FF и компания обрабатывают CSS для динамического HTML, он будет устанавливать ваши полосы нагрузка, но не применять CSS после сортировки. Но я хотел бы знать наверняка.
Пересмотренное и новейшее рабочее решение - встроенный * Это также позволит изменить цвет при нажатии. *
<script type="text/javascript">
$(document).ready(function () {
$('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
.tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
$('#tbltable1 tbody tr').live('click', function () {
if ($(this).hasClass('even')) {
$(this).removeClass('even');
$(this).addClass('ui-selected');
}
else if ($(this).hasClass('odd')) {
$(this).removeClass('odd');
$(this).addClass('ui-selected');
}
else {
$(this).removeClass('ui-selected');
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("applyWidgets");
}
});
});
</script>
Теперь все должно удариться!
Через ваш css:
table.tablesorter tr:nth-child(even) {
background-color: #ECFAFF;
}