Question

I currently have an alternative table row color with the following javascript code:

function alternate(id){     
    if(document.getElementsByTagName){  
        var table = document.getElementById(id);   
        var rows = table.getElementsByTagName("tr");    
        for(i = 0; i < rows.length; i++){           
            if(i % 2 ==0 ){ 
                rows[i].className = "odd0"; 
            }else { 
                rows[i].className = "even2"; 
            }
        }
    }
} // end function

What I would like to add in here, is to make the condition of either of the following:

• If Div id “arrow” exists in the table row, then make the classname “odd0”

• If Div id “arrow” exists in the table row, then make the classname the same color as the row above it.

My first attempt was to try to make the classname “odd0” if the div id “arrow” exists; however, it just breaks my code or doesn’t read it.

I attempted the following, by either making it into its own function or inserting it within the for loop…

 if (document.getElementById("arrow")) {
  rows[i].className = "odd0";
 }

Any help is much appreciated!

Answer 1

Your question is a bit vague and your requirements seem contradictory. But, I think what you want is for your rows to alternate between odd0 and even2, unless you have an arrow in your row. Then you want the current row to have the same class as the row above it.

Correct me if I am wrong.

Because you put jQuery as a tag, I will give you a jQuery answer. If you don’t know jQuery, I would recommend learning it. It makes this kind of class/css manipulation a lot easier than straight JavaScript, and takes care of all of the cross-browser issues for you.

function alternate(id) {
    var i = 1;
    // Go through each row
    $('#'+id).find('tr').each(function() {
        // If this isn't an "arrow" row, increment the count
        if ($(this).find('.arrow').length < 1) {
            i++;
        }
        // Decide whether the row is odd or even
        if (i % 2 == 0) {
            $(this).addClass('even2');
        } else {    
            $(this).addClass('odd0');
        }
    });
}

Demo: http://jsfiddle.net/jtbowden/uBgYH/1/