javascript交替顏色行的表

我有一個頁面上有幾個表與它具有相同的類名。我想要替換此頁面上每個表格的行的顏色。我正在使用下面的代碼。此代碼無法正常工作，因爲一次只有一個表格是交替的顏色（第一個表格）。我究竟做錯了什麼？我的網頁上的所有表格都有「mytable」類。javascript交替顏色行的表

function altrows(classname,firstcolor,secondcolor) 
{ 
    var tableElements = document.getElementsByClassName(classname) ; 
    for(var j= 0; j < tableElements.length; j++) 
    { 
     var table = tableElements[j] ; 

     var rows = table.getElementsByTagName("tr") ; 
     for(var i = 0; i < rows.length; i=i+2) 
     { 
      rows[i].bgColor = firstcolor ; 
      rows[i+1].bgColor = secondcolor ; 
     } 
    } 
}

來源

2010-03-09 quoc

'document.getElementsByClassName（）'不適用於所有瀏覽器，因爲並非所有瀏覽器都支持它 - 請參閱http://www.quirksmode.org/dom/w3c_core.html – 2010-03-09 20:38:15

如果表中的一個具有奇數行，你的功能將打破上線

 rows[i+1].bgColor = secondcolor ;

，不處理任何如下表。您應該檢查是否有一排設置secondcolor前：

function altrows(classname,firstcolor,secondcolor) 
{ 
    var tableElements = document.getElementsByClassName(classname) ; 
    for(var j= 0; j < tableElements.length; j++) 
    { 
     var table = tableElements[j] ; 

     var rows = table.getElementsByTagName("tr") ; 
     for(var i = 0; i < rows.length; i=i+2) 
     { 
     rows[i].bgColor = firstcolor ; 
     if (i+1 < rows.length) { 
      rows[i+1].bgColor = secondcolor ; 
     } 
     } 
    } 
}

或遍歷每一行，而不是遍歷套兩行：

function altrows(classname,firstcolor,secondcolor) 
{ 
    var tableElements = document.getElementsByClassName(classname) ; 
    for(var j= 0; j < tableElements.length; j++) 
    { 
     var table = tableElements[j] ; 

     var rows = table.getElementsByTagName("tr") ; 
     for(var i = 0; i < rows.length; i++) 
     { 
     rows[i].bgColor = (i%2==0) ? firstcolor : secondcolor ; 
     } 
    } 
}

來源

2010-03-09 20:43:20

謝謝。這是錯誤 – quoc 2010-03-09 20:57:02

如果我想要一列紅色，兩列藍色，一列紅色，兩列藍色等等，該怎麼辦？你能幫我解決這個問題嗎？ – Ionut 2016-09-23 13:47:20

在這種情況下，你可能會繞過每一行，但用'（i％3 == 0）'替換'（i％2 == 0）'（所以它只顯示第一個顏色（紅色）第一個三行） – 2016-09-23 14:54:43

斑馬條紋很容易使用jQuery。 Check it。值得使用和理解，你可以實現相同的。

Sitepoint有一個很好的教程，它只使用JavaScript。沒有jquery。

來源

2010-03-09 20:36:09

jquery不是所有人的答案javascript問題... – Gregoire 2010-03-09 20:38:14

@Gregoire，我從來沒有說jquery是解決方案，我提供瞭解決方案jQuery和常規解決方案，我指出了正確的解決方案。 – 2010-03-09 21:37:53

<script type="text/javascript"> 
function altrows(classname,firstcolor,secondcolor) 
{ 
    var tableElements = document.getElementsByClassName(classname) ; 
    for(var j = 0; j < tableElements.length; j++) 
    { 
     var table = tableElements[j] ; 

     var rows = table.getElementsByTagName("tr") ; 
     for(var i = 0; i <= rows.length; i++) 
     { 
      if(i%2==0){ 
       rows[i].style.backgroundColor = firstcolor ; 
      } 
      else{ 
       rows[i].style.backgroundColor = secondcolor ; 
      } 
     } 
    } 
} 
</script>

來源

2010-03-09 20:36:45 Gregoire

這不起作用。使用這個腳本，第一個表格甚至不會交替使用 – quoc 2010-03-09 20:41:20

@quoc：如果將alert（tableElements.length）;在第一次之前？ – Gregoire 2010-03-09 20:43:10

把alert（tableElements.length）;在第一節之前，我在FF 3中沒有得到任何不同。6和IE 8 – quoc 2010-03-09 20:51:59

rows[i]將始終存在，但rows[i + 1]威力不存在。然後rows[i+1].bgColor = secondcolor ;會導致某種致命錯誤，導致整個腳本崩潰。

考慮使用CSS：

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

table tr:nth-child(odd) { 
    background-color: blue; 
}

，或者使用固定的JS：

功能altrows（類名，firstcolor，secondcolor） { 變種tableElements = document.getElementsByClassName（類名）;

for(var j = 0; j < tableElements.length; j++) 
{ 
    var table = tableElements[j] ; 

    var rows = table.getElementsByTagName("tr") ; 
    for(var i = 0; i < rows.length; i++) 
    { 
     rows[i].bgColor = i % 2 == 0 ? firstcolor : secondcolor ; 
    } 
}

}

來源

2010-03-09 20:43:27 Crozin

對於CSS解決方案。可悲的是，IE8不支持'nth-child'，而其他的在動態插入/刪除節點時會遇到困難（http://www.quirksmode.org/css/contents.html#t39）。 – outis 2010-03-09 20:51:04

謝謝，會考慮這個 – quoc 2010-03-09 20:57:41

如果我想要有一列紅色，兩列藍色，一列紅色，兩列藍色等等呢？你能幫我解決這個問題嗎？ – Ionut 2016-09-23 13:47:26

這是概率不是你要找的答案，但這裏是只有2 jQuery的:)

$線交替行顏色的快速簡便的方法（'tr：odd'）.css（「background-color」，「＃F4F4F8」）; （'tr：even'）。css（「background-color」，「＃EFF1F1」）;

來源

2011-04-06 17:47:56 mommaroodles

javascript交替顏色行的表

回答

相關問題