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

58
6

У меня проблема с таблицами стилей с использованием 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;
}

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

Что я делаю не так?

Благодарю.

спросил(а) 2013-07-24T12:36:00+04:00 7 лет, 2 месяца назад
1
Решение
117

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

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

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

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

демонстрация

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

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

Демонстрация 2

ответил(а) 2013-07-24T12:38:00+04:00 7 лет, 2 месяца назад
70

Мне нравится предлагать решения, не требующие многого или изменить исходный источник. Ваш HTML отлично, JScript в порядке (очень хорошо). Приятно видеть, что вы используете.classname, так что это кросс-браузер, совместимый. Поэтому все, что я сделал, это изменить классы для CSS

ВАШ КОД

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

МОИ ИЗМЕНЕНИЯ


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

РАБОЧИЙ ФИДДЛ

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

ответил(а) 2013-07-24T13:04:00+04:00 7 лет, 2 месяца назад
71

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

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

ответил(а) 2013-07-24T12:55:00+04:00 7 лет, 2 месяца назад
41

У вас проблема в 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

ответил(а) 2013-07-24T12:53:00+04:00 7 лет, 2 месяца назад
-6

Попробуйте это... см. Демонстрацию

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

ответил(а) 2013-07-24T12:39:00+04:00 7 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема