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/

替代解决方案：

（用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/

Answer 2

您必须为每个表添加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"; 
        }
      }
    }
  }
}

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

    }

  } }

}

交替表行与Javascript问题

3 个答案: