CODEWITHSUNDEEP
javascripthtml
prakashkadakol
prakashkadakol

Reputation: 1237

odd even class for table rows

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>

Upvotes: 1

Views: 3719

Answers (2)

Phil
Phil

Reputation: 164809

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/

Upvotes: 2

Mala
Mala

Reputation: 14823

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

Upvotes: 1

Related Questions