Чередование строк таблицы с проблемой JavaScript

#javascript #html #row #tablerow

#JavaScript #HTML #строка #tablerow

Вопрос:

У меня есть следующий скрипт, работающий для добавления нечетных и четных классов к чередующимся строкам таблицы, который работает нормально.

 function alternate(){ 
if(document.getElementsByTagName){  
var table = document.getElementsByTagName("table");
var rows = document.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i  ){
  //manipulate rows   
      if(i % 2 == 0){  
        rows[i].className = "even"; 
      }else{  
        rows[i].className = "odd"; 
      }
    }
  } 
}

Однако проблема возникает, когда на странице более одной таблицы. Мне нужно, чтобы счетчик сбрасывался для каждой таблицы на странице, чтобы первая строка каждой таблицы всегда имела один и тот же класс (т. Е. Нечетный). В настоящее время вторая таблица на странице будет просто продолжать подсчет строк четно-нечетно, поэтому она начнется с другого класса, если в первой таблице нечетное количество строк.

Кто-нибудь может помочь мне изменить этот код для достижения этой цели?

1. Ничего общего с вашим скриптом, но, похоже, вы хотите применить другой класс к четным строкам и к нечетным строкам. Для этого существуют правила CSS3: tr:nth-child(even) и tr:nth-child(odd) .

2. Возможно, вы захотите поменять имена классов — первая строка имеет индекс 0 , что означает, что нечетные строки имеют четные индексы…

Ответ №1:

Вот и все:

 function alternate() {
    var i, j, tables, rows;

    tables = document.getElementsByTagName( 'table' );

    for ( i = 0; i < tables.length; i  = 1 ) {
        rows = tables[i].rows;

        for ( j = 0; j < rows.length; j  = 1 ) {
            rows[j].className = j % 2 ? 'even' : 'odd';
        }
    }   
}

Живая демонстрация: http://jsfiddle.net/simevidas/w6rvd/

Альтернативное решение:

(Замена операторов for итерации forEach вызовами делает код более кратким. Однако в IE8 это не работает :/ .)

 function alternate() {
    var tables = document.getElementsByTagName( 'table' );

    [].forEach.call( tables, function ( table ) {
        [].forEach.call( table.rows, function ( row, i ) {
            row.className = i % 2 ? 'even' : 'odd';
        });
    }); 
}

Живая демонстрация: http://jsfiddle.net/simevidas/w6rvd/1/

1. «нечетные» и «четные» являются обратными — нечетные строки получат четный класс и наоборот.

2. @RobG Да, я уже обращался к этому в комментарии к исходному вопросу.

3. Хорошо, заявление об этом в ответе сделало бы его самостоятельным, чтобы помочь таким скиммерам, как я. 🙂

4. Отлично, спасибо 🙂 Теперь это кажется таким очевидным!

Ответ №2:

Вы должны добавить a for для каждой таблицы:

 function alternate(){ 
  if(document.getElementsByTagName){  
    var table = document.getElementsByTagName("table");
    // each table
    for(a = 0; a < table.length; a  ){
      var rows = table[a].getElementsByTagName("tr");
      for(i = 0; i < rows.length; i  ){
        //manipulate rows   
        if(i % 2 == 0){  
          rows[i].className = "even"; 
        }else{  
          rows[i].className = "odd"; 
        }
      }
    }
  }
}

Ответ №3:

выполните эту работу на основе каждой таблицы

  function alternate(){ 
 if(document.getElementsByTagName){  
var table = document.getElementsByTagName("table");

var rows = document.getElementsByTagName("tr");

for(var a = 0; a < table.length; a  ){
{
   for(var i = 0; i < table[a].rows.length; i  ){
  //manipulate rows   
  if(i % 2 == 0){  
    table[a].rows[i].className = "even"; 
     }else{  
     table[a].rows[i].className = "odd"; 
      }
    }

    }

  } }

}