Главная » Файлы » jQuery и JS> |
·
| 21.09.2013, 22:02 |
Цитата Как создать полосатые строки в таблице? Как оказалось, всё просто как дважды два и самое главное, что работает на uCozе. #1 Начнем с HTML: Начнем с того, что определим стандартную конструкцию таблиц. Для начала, создадим двойной тег table. После чего, допишем к нему строки ( HTML-Code
Во избежание лишних вопросов, сразу скажу вам, что это стандартная конструкция таблиц в HTML. Которую, вы также можете использовать для верстки. Но, как мы модем увидеть по структуре таблицы, у каждой строки есть по две ячейки, а у верхней лишь одна. Как же это исправить? Для этого существует специальный тег HTML-Code
Затем, установим специальные атрибуты таблиц HTML-Code
В данном виде, наша таблица выглядит вот так: #2 Перейдем на CSS: Теперь, перейдем к каскадной таблице стилей, и предадим нашей таблице кое-какой внешний вид. Для начала, добавим класс HTML-Code
Теперь, в нашем CSS документе пропишем стили для данной таблицы: CSS-Code
Где у нас значение селекторов: CSS-Code
И значение атрибутов: CSS-Code
Почему же, у нас сначала указана общая обводка, а затем обводка с верху и с права? Потому, что то, что идет после общей обводки имеет высший приоритет. Мы так же могли прописать обводку с лева и с низу, но это заняло бы большее место. CSS-Code
Теперь, наша таблица выглядит таким образом: #3 И закончим JavaScript’ом: Для того, чтобы подключить jQuery нам нужно прописать в теге head данный код: HTML-Code
Для пользователей uCoz, библиотеку jQuery можно не подключать, так как она уже вшита в вашу страницу системой. Теперь, займемся непосредственно скриптом. Это готовый код нашего скрипта, а каким образом он работает я расскажу чуть ниже. JS-Code
Все, что находится между данным кодом, происходит после полной прогрузки страницы: JS-Code
Эта функция jQuery, которая позволяет вставлять скрипт в начала документа, до прогрузи используемых элементов. А в простом JS без использования jQ нельзя написать скрипт выше используемых элементов. JS-Code
То есть, данный скрипт находит все строки таблицы с классом .table и добавляет каждой четной строке новый класс .second, у которого в свою очередь данный стиль: JS-Code
Который говорит, что задний фон всех ячеек, которые находятся в четных строках сменится на серый цвет. Конечный вариант нашей таблицы выглядит так: | |
Просмотров: 865 | Загрузок: 284 | Источник: center-dm.ru | Рейтинг: 5.0/1 |
Всего комментариев: 0 | |