Функция поиска для одного и того же имени класса

Question

У меня есть функция, с которой я работаю в javascript, чтобы выделить каждую другую строку данной таблицы, названную одним и тем же классом ... Я столкнулся с проблемой, код отлично работает, но он будет обнаруживать только первую таблицу с таким классом ... Мне нужно, чтобы она выполняла задачу для каждой отдельной таблицы с таким же классом.

Я пробовал несколько вещей, но ничего не работало ... никаких предложений? спасибо!

Вот что я работаю с

function start(){ 
    var list=document.getElementsByClassName("highlight"); 
    for(i=0; i<list.length; i++){ 
    var element= list[i].getElementsByTagName("tr"); 

for(i=0; i<element.length; i++) 
{ 
    if (i%2 == 0) { 
     element[i].className = "odd" 
    } 
    else{ 
     element[i].className = "even"; 
    } 
    } 
    } 
    } 

    window.addEventListener("load", start, false); 

Answer 1

Вы должны использовать другую переменную во внутреннем для утверждения.

Смотрите рабочий образец здесь: http://codepen.io/anon/pen/wsCxG

window.onload = start; 

function start(){ 
    var list=document.getElementsByClassName("highlight"); 

    for(i=0; i<list.length; i++) 
    { 
     var element= list[i].getElementsByTagName("tr"); 

     for(j=0; j<element.length; j++) 
     { 
      if (j%2 == 0) { 
       element[j].className = "odd" 
      } 
      else{ 
       element[j].className = "even"; 
      } 
      } 
    } 
} 

Answer 2

, что о чистом CSS3?

tr:nth-child(odd) { 
background-color: green; 
} 
tr:nth-child(even) { 
background-color: red; 
} 

с подсветкой

.highlight tr:nth-child(odd) { 
background-color: green; 
} 
.highlight tr:nth-child(even) { 
background-color: red; 
} 

пример

http://jsfiddle.net/RppAT/

если вы хотите Js (сокращенную + while--)

function OE(){ 
var lists=document.getElementsByClassName("highlight"),listsLength=lists.length; 
while(listsLength--){ 
    var trs=lists[listsLength].getElementsByTagName("tr"),trsLength=trs.length; 
    while(trsLength--){ 
    trs[trsLength].className=(trsLength%2==0)?'odd':'even'; 
    } 
} 
} 
window.onload=OE;