I took an html table that I am applying alternative row colors to, and I added jquery table sorter on it so users can sort the table.
The issue is that the alternative row colors are all messed up now as (based on the sorting) there are multiple rows with the same background color.
Is there any way to reset the alternative row color with jquery table sorter?
Revised and Latest working solution - inbuilt *This will also enable the change of colour on click.*
<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>
Now everything should kick itself out !