3

After I change content by moving elements around, I want to re-apply odd and even styles for them. But in this specific example, it's not working. Unfortunately I can't use CSS for :even and :odd selectors (not supported in IE 8). Please help.

http://jsfiddle.net/rghg3j5v/

function highlightRows() {
    $('table tr:odd td').addClass('odd');
    $('table tr:even td').addClass('even');
}

highlightRows(); // Initial styling

$('.up').click(function() {
    var parent = $(this).parents('tr');
    var prev = $(parent).prev();

    $(parent).insertBefore(prev);
    highlightRows(); // Re-apply style when element is moved
});

$('.down').click(function() {
    var parent = $(this).parents('tr');
    var next = $(parent).next();

    $(parent).insertAfter(next);
    highlightRows(); // Re-apply style when element is moved
});

1 Answer 1

5

You'll have to remove the old classes to reset, otherwise the elements end up with both classes, the first one taking presedence

function highlightRows() {
    $('table tr td').removeClass('odd even');
    $('table tr:odd td').addClass('odd');
    $('table tr:even td').addClass('even');
}

FIDDLE

1
  • Stupid is as stupid does, we all do things like that from time to time.
    – adeneo
    Jan 4, 2015 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.