odd even class for table rows

Question

I have table with rows where as in between have hidden rows and because of that odd even css class not able to set. How can I avoid those hidden rows?

HTML

<tr class="oddRow">
     <td>Avinash</td>
     <td>18-Jun-2010</td>
     <td>LI1004</td>
     <td>5,600.00</td>
     <td>Sort</td>
</tr><tr class="oddRow" style="display:none;">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr><tr class="evenRow">
     <td>Ankur</td>
     <td>14-Jun-2010</td>
     <td>LI1005</td>
     <td>5,000.00</td>
     <td>me</td>
</tr><tr class="oddRow">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr>

@prakash why do you have two oddRows one after the other? And why does the second one have `style="display:none;"` ? — Khez, Apr 18 '11 at 04:51
I think that he would like his rows to alternate styles (bgcolors, possibly) but the issue is he needs the ability to hide rows via JS. When he does this, this breaks the even-odd-even-odd style layout. I believe what he is asking is how to make it such that he can dynamically hide rows but still alternate row styles — Mala, Apr 18 '11 at 05:04

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

I know this isn't tagged jQuery but this would be the easiest way to apply this solution...

You don't need two CSS classes here (odd and even), just one. Start by setting the CSS for every row to use the "oddRow" style declarations by default. The "evenRow" style declarations should simply overwrite the defaults.

Add this JS function

var zebraStripes = function($) {
    $('table.stripes tr').removeClass('evenRow')
        .filter(':visible:odd').addClass('evenRow');
    // using the :odd selector as it is zero-based
}

You can then bind this function to the document ready event as well as any event that changes row visibility.

Edit

Updated to work with jQuery 1.7, example here - http://jsfiddle.net/UZNKE/6/

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 18 '11 at 05:16

Phil

128,310
20
201
202

Why did you put the function in a variable instead of doing something like `function zebrastripes() {}`? – Mala Apr 18 '11 at 05:40
1

@Mala In this case, it wouldn't make much difference - http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname – Phil Apr 18 '11 at 05:52
I don't understand why, but this answer does not work. Here's my solution instead: `$('table.stripes tr:visible').each(function(index, row) { if (index%2==1) { $(row).addClass('evenRow'); } });` – Ashitaka Jul 30 '12 at 17:20
Ooh, so now you have the odd and even selectors. Thank you so much Phil! – Ashitaka Jul 31 '12 at 03:24

score 1 · Answer 2 · answered Apr 18 '11 at 05:12

Assuming your question is asking what I posted in the comments, you'll have to have a more in-depth 'hide' function which will change the classes of all subsequent functions. I expect you'll want to use something like this:

function hideRow(rowNum)
{
    var rows = document.getElementById('table-id').getElementsByTagName('table');

    // get current class and hide the row
    var currentClass = rows[rowNum].className;
    rows[rowNum].style.display = 'none';

    // set up classname array
    var classNames = new Array("oddRow", "evenRow");
    // make sure 'j' points to the next desired classname
    var j = 0;
    if (classNames[j] == currentClass)
        j = 1;

    // make all subsequent visible rows alternate
    for (i=rowNum+1; i<rows.length; i++)
    {
        // ignore empty rows
        if (rows[i].currentStyle.display == "none")
            continue;

        // set class name
        rows[i].className = classNames[j];
        j = (j+1) % 2;
    }
}

Note: I haven't tested the code, but I commented it so you should be able to figure out what's going on

odd even class for table rows

2 Answers2

Edit