替代行顏色

我想顯示不同顏色的替代行。我已經在CSS中指定了顏色。當我檢查時，行有class =「odd」或class =「even」，但有些行有class =「odd even」和class =「even odd」。它是如何發生的？任何人都可以解釋爲什麼它將課程視爲「奇數偶數」或「偶數」。提前致謝。替代行顏色

table.dataTable .odd { background-color: red; } 
table.dataTable .even { background-color: green; }

來源

2013-06-25 kishore

你可以發佈一些代碼嗎？ –

你在使用分頁嗎？ –

你有一個嘗試代碼，請發佈你的代碼 – falguni

爲什麼你甚至爲此使用類？

tr {background-color:white} 
tr:nth-child(even) {background-color:black}

來源

2013-06-25 11:13:10

這將是最好的解決方案，使用'modulus'只是將類添加到交替行看起來有點浪費。 –

也許他們想支持 anothershrubery

儘管您可能會使用不同的解決方案（服務器端模數）來支持1個或2箇舊瀏覽器版本，但看起來很奇怪。 –

嘗試CSS

tr:nth-child(even) { 
    background-color: #000000; 
}

的JavaScript

$(document).ready(function() 
    { 
     $("tr:even").css("background-color", "#000000"); 
    });

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

來源

2013-06-25 11:14:06 falguni

如果你必須支持舊的瀏覽器（如IE8），第n個孩子不工作。一個簡單的workarround是Kolink的和falguni的解決方案的組合：

tr {background-color:white} 
tr:nth-child(even), tr.even {background-color:black} 

$(document).ready(function(){ 
    $("tr:even").addClass('even'); 
});

解決方案falguni給有一種不好的做法，它使用JS來更新樣式。如果你認爲它不應該是黑色的，而是藍色的，你將不得不改變兩個位置。我的例子並不需要。

我的代碼可以改進，你可以檢查用戶是否支持：nth選擇器和IF NOT（添加類）的性能。

來源

2013-06-25 11:19:32 Martijn

回答

相關問題