Цвет строки альтернативной таблицы с помощью CSS?
Решение OO для этого состоит в создании класса отношения. Это не потребует никакого дополнительного кода (что бы сэкономить), было бы значительно чище / яснее и предоставило бы вам некоторые дополнительные рефакторинги, позволяющие очищать код вне этого класса.
На самом деле я думаю, что кто-то рекомендуется вернуть структуру, которая достаточно близка, но скрывает намерение, что это должен быть полностью продуманный класс с конструктором и несколькими методами, по сути, «метод», который вы первоначально упоминали (как возвращение пары), должен вероятно, будет членом этого класса, возвращая экземпляр самого себя.
Я знаю, что ваш пример был просто «примером», но факт в том, что, если ваша функция не делает больше, чем любая функция должна делать, Если вы хотите, чтобы он возвращал несколько значений, вы почти наверняка потеряли объект.
Не бойтесь создавать эти крошечные классы, чтобы делать небольшие куски работы - это волшебство OO - вы заканчиваете до тех пор, пока каждый метод не будет очень маленьким и простым, а каждый класс будет небольшим и понятным.
Еще одна вещь, которая должна была быть индикатором того, что что-то не так: в OO у вас практически нет данных - OO не собирается передавать данные, классу нужно управлять и манипулировать собственными данными внутри, любые передачи данных (включая аксессоры) являются признаком того, что вам может потребоваться переосмыслить что-то ..
5 ответов
$ (документ) .ready (function () {$ ("tr: odd"). Css ({"background-color": "# 000", "color": "# fff"});}) ; tbody td {padding: 30px; } tbody tr: nth-child (нечетный) {цвет фона: # 4C8BF5; цвет: #fff; } 1 2 3 4 5 6 7 8 9 10 11 13
Существует селектор CSS, на самом деле псевдоселектор, называемый nth-child. В чистом CSS вы можете сделать следующее:
tr:nth-child(even) {
background-color: #000000;
}
Примечание: Нет поддержки в IE 8.
Или, если у вас есть jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
У вас есть : nth-child () псевдокласс:
table tr:nth-child(odd) td{
...
}
table tr:nth-child(even) td{
...
}
В первые дни : nth-child () его поддержка браузера был вроде как бедным. Вот почему установка class = "odd" стала такой распространенной техникой. В конце 2013 года я рад сообщить, что IE6 и IE7 наконец-то мертвы (или настолько больны, что перестают заботиться), но IE8 все еще существует - к счастью, это единственное исключение.
Вы можете использовать селекторы nth-child (нечетные / четные), однако не все браузеры ( т.е. 6-8, ff v3.0 ) поддерживают эти правила, поэтому большинство решений вернуться к некоторой форме решения javascript / jquery, чтобы добавить классы в строки для этих несовместимых браузеров, чтобы получить эффект полосы тигра.
могу ли я написать свой html вот так, используя css?
Да, вы можете, но тогда вам придется использовать псевдоселектор : nth-child () (который, однако, имеет ограниченную поддержку):
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>