使用Javascript問題的交替錶行

我有以下腳本工作，以添加奇數和偶數類交替錶行，它工作正常。使用Javascript問題的交替錶行

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

但是，當頁面上有多個表格時會出現問題。我需要計數器爲頁面上的每個表重置，所以每個表的第一行總是具有相同的類別（即奇數）。目前，頁面上的第二個表格將對odd-even行進行計數，因此如果第一個表格有奇數行，它將從不同的類別開始。

任何人都可以幫我改變這個代碼來實現這個嗎？

來源

2011-10-27 Ralphonz

沒有處理你的腳本，但似乎你想申請與偶數行和奇數行不同的類。有CSS3規則：'tr：nth-child（even）'和'tr：nth-child（odd）'。 –

您可能想要切換類名稱 - 第一行的索引爲「0」，這意味着奇數行甚至包含索引... –

在這裏你去：

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/

來源

2011-10-27 12:14:00

結果相同，代碼更簡單。 – samura

「奇數」和「偶數」是反向前沿 - 奇數行將獲得偶數類，反之亦然。 – RobG

@RobG是的，我已經在對原始問題的評論中解決了這個問題。 –

您必須添加一個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"; 
     } 
     } 
    } 
    } 
}

來源

2011-10-27 12:16:24 samura

做好這項工作的基礎上，每個表

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

    } 

    } } 

}

來源

2011-10-27 12:26:39 david

使用Javascript問題的交替錶行

回答

相關問題