Select odd even child excluding the hidden child

Question

Line 3 is a hidden

. I don\'t want that one to be taken from the odd/even css rule.

What is the best approach to get t

Answer 1

As @Fateh Khalsa pointed out, I had a similar problem and since I was manipulating my table with JavaScript (jQuery to be precise), I was able to do the following:

(Note: This assumes use of JavaScript/jQuery which the OP did not state whether or not would be available to them. This answer assumes yes, it would be, and that we may want to toggle visibility of hidden rows at some point.)

• Inactive records (identified with the CSS class "hideme") are currently visible.
• Visitor clicks link to hide inactive records from the list.
• jQuery adds "hidden" CSS class to "hideme" records.
• jQuery adds additional empty row to the table immediately following the row we just hid, adding CSS classes "hidden" (so it doesn't show) and "skiprowcolor" so we can easily identify these extra rows.

This process is then reversed when the link is clicked again.

• Inactive records (identified with the CSS class "hideme") are currently hidden.
• Visitor clicks link to show inactive records from the list.
• jQuery removes "hidden" CSS class to "hideme" records.
• jQuery removes additional empty row to the table immediately following the row we just showed, identified by CSS class "skiprowcolor".

Here's the JavaScript (jQuery) to do this:

// Inactive Row Toggle
$('.toginactive').click(function(e) {
    e.preventDefault();
    if ($(this).hasClass('on')) {
        $(this).removeClass('on');                  // Track that we're no longer hiding rows
        $('.wrap tr.hideme').removeClass('hidden'); // Remove hidden class from inactive rows
        $('.wrap tr.skiprowcolor').remove();        // Remove extra rows added to fix coloring
    } else {
        $(this).addClass('on');                     // Track that we're hiding rows
        $('.wrap tr.hideme').addClass('hidden');    // Add hidden class from inactive rows
        $('.wrap tr.hideme').after('');
                                                    // Add extra row after each hidden row to fix coloring
    }
});

The HTML link is simple

Hide/Show Hidden Rows