Таблицы стилей с использованием CSS

Question

У меня проблема с таблицами стилей с использованием CSS.

Так у меня есть таблица в моем HTML-файл:

<table class="altrowstable" id="alternatecolor"> 
<tr> 
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 
</tr> 
<tr> 
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 
</tr> 
<tr> 
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 
</tr> 
<tr> 
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> 
</tr> 
<tr> 
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> 
</tr> 
<tr> 
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> 
</tr> 
</table> 

Вот мой JavaScript файл:

function altRows(id){ 
if(document.getElementsByTagName){ 

    var table = document.getElementById(id); 
    var rows = table.getElementsByTagName("tr"); 

    for(i = 0; i < rows.length; i++){   
     if(i % 2 == 0){ 
      rows[i].className = "evenrowcolor"; 
     }else{ 
      rows[i].className = "oddrowcolor"; 
     }  
    } 
    } 
} 
window.onload=function(){ 
altRows('alternatecolor'); 
} 

А вот мой CSS файл:

table.altrowstable { 
    font-family: verdana,arial,sans-serif; 
    font-size:11px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #a9c6c9; 
    border-collapse: collapse; 
} 
table.altrowstable th { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #a9c6c9; 
} 
table.altrowstable td { 
    border-width: 1px; 
    padding: 8px; 
     border-style: solid; 
    border-color: #a9c6c9; 
} 

table.oddrowcolor{ 
    background-color:#d4e3e5; 
} 
table.evenrowcolor{ 
    background-color:#c3dde0; 
} 

Проблема заключается в том, что он не меняет цвет ни нечетных строк, ни даже нечетных.

Что я делаю неправильно?

Спасибо.

Answer 1

Я приведу вам CSS решение для этого:

table.class_name tr:nth-child(odd) { 
    /* Styles */ 
} 

table.class_name tr:nth-child(even) { 
    /* Styles */ 
} 

Это все, что вам нужно, хотя это не поддерживается в IE 8 и выше.

Demo

Для ваших заголовков таблицы, вы можете просто использовать другой селектор более оседлать стили фона, как

table.altrowstable tr th { 
    background: #fff; 
} 

Demo 2

Answer 2

Попробуйте это ... see the Demo

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

Answer 3

У вас проблема в CSS. Вы устанавливаете класс для таблицы, а так же, как и для td.

Вы также должны изменить ваши ниже JS, как стиль может быть применен к td и не tr

var rows = table.getElementsByTagName("td"); 

Здесь проблема в вашем CSS

table.oddrowcolor{ 
    background-color:#d4e3e5; 
} 
table.evenrowcolor{ 
    background-color:#c3dde0; 
} 

Вы должны использовать это вместо

table td.oddrowcolor{ 
    background-color:#d4e3e5; 
} 
table td.evenrowcolor{ 
    background-color:#c3dde0; 
} 

jsFiddle

Answer 4

Я проверил ваш код и нашел небольшую коррекцию в css, чтобы получить ожидаемое решение. Между таблицей и строкой класса должно быть пустое пространство.

table .oddrowcolor{ 
    background-color:#d4e3e5; 
} 
table .evenrowcolor{ 
    background-color:#c3dde0; 
} 

Answer 5

Я хотел бы предоставить решение, которые DonT подправлять или изменить первоисточник много. Ваш HTML в порядке, JScript в порядке (очень хорошо). Приятно видеть, что вы используете .classname, так что это совместимо с cross bruser.Таким образом, все, что я сделал это изменить классы для CSS

ВАШ КОД

table.oddrowcolor { 
    background-color:#d4e3e5; 
} 
table.evenrowcolor { 
    background-color:#c3dde0; 
} 

МОЙ CHANGE

tr.oddrowcolor { 
    background-color:#d4e3e5; 
} 
tr.evenrowcolor { 
    background-color:#c3dde0; 
} 

WORKING FIDDLE

полное изменение из кода в мой. 8 символов. Простой, не так ли?