javascript - 使用 Javascript 问题交替表行

Question

我有以下脚本可以将奇数类和偶数类添加到交替的表行中，效果很好。

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"; 
      }
    }
  } 
}

但是当一个页面上有多个表格时就会出现问题。我需要为页面上的每个表重置计数器，以便每个表的第一行始终具有相同的类(即奇数)。目前，页面上的第二个表将仅继续计算行的奇数-偶数，因此如果第一个表的行数为奇数，它将从不同的类开始。

任何人都可以帮助我更改此代码以实现此目的吗？

Answer 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/

---

替代方案:

(用 forEach 调用替换 for 迭代语句使代码更简洁。尽管 :/ 在 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/