» » >

Чётные строки таблиц на JS
·
21.09.2013, 22:02

Цитата
Как создать полосатые строки в таблице?

Как оказалось, всё просто как дважды два и самое главное, что работает на uCozе.

#1 Начнем с HTML:

Начнем с того, что определим стандартную конструкцию таблиц. Для начала, создадим двойной тег table. После чего, допишем к нему строки (tr) и поля (td). Наша таблица будет состоять из двух ячеек и четырех полей и одной верхней строки — названия.

HTML-Code

<table>
  <tr>
  <td>Название таблицы</td>
  </tr>
  <tr>
  <td>Поле 1, ячейка 1</td>
  <td>Поле 1, ячейка 2</td>
  </tr>
  <tr>
  <td>Поле 2, ячейка 1</td>
  <td>Поле 2, ячейка 2</td>
  </tr>
  <tr>
  <td>Поле 3, ячейка 1</td>
  <td>Поле 3, ячейка 2</td>
  </tr>
  <tr>
  <td>Поле 4, ячейка 1</td>
  <td>Поле 4, ячейка 2</td>
  </tr>
</table>

Во избежание лишних вопросов, сразу скажу вам, что это стандартная конструкция таблиц в HTML. Которую, вы также можете использовать для верстки.

Но, как мы модем увидеть по структуре таблицы, у каждой строки есть по две ячейки, а у верхней лишь одна. Как же это исправить? Для этого существует специальный тег colspan (в атрибутах которого указывается, количество не достающих ячеек, включая самого себя).

HTML-Code

<tr>
  <td colspan=”2”>Название таблицы</td>
</tr>

Затем, установим специальные атрибуты таблиц cellpadding (внутренний отступ ячеек), cellspacing (вешний отступ ячеек) и border (границы таблицы) на ноль.

HTML-Code

<table cellpadding="0" cellspacing="0" boder=”0”>

В данном виде, наша таблица выглядит вот так:


#2 Перейдем на CSS:

Теперь, перейдем к каскадной таблице стилей, и предадим нашей таблице кое-какой внешний вид.

Для начала, добавим класс .table наше таблицу, и идентификатор #title для ячейки с название нашей таблицы.

HTML-Code

<table class=”table” cellpadding="0" cellspacing="0" boder=”0
  <tr>
  <td id=”title” colspan=”2”>Название таблицы</td>
  </tr>

Теперь, в нашем CSS документе пропишем стили для данной таблицы:

CSS-Code

.table {  
border-bottom:1px solid #ccc;  
border-left:1px solid #ccc;
  font-family:Tahoma;  
font-size:12px; color:#333333
}

.table td {  
padding:6px;
border:1px solid #fff;  
border-top: 1px solid #ccc;  
border-right: 1px solid #ccc;  
background-color:#f5f5f5
}

.table #title {  
font-family:Trebuchet MS; font-size:14px;
text-shadow:1px 1px 0px #fff
}

Где у нас значение селекторов:
.table // основной стиль таблицы

CSS-Code

.table td // стиль всех ячеек таблицы
.table #title // стиль ячейки названия таблицы

И значение атрибутов:

CSS-Code

border-bottom:1px solid #ccc;
  border-left:1px solid #ccc — обводка с низу и с лева;
font-family:Tahoma; font-size:12px; color:#333333 — шрифт, размер и цвет текста;
padding:6px отступы внутри ячеек;
border:1px solid #fff — общая обводка белого цвета;
border-top: 1px solid #ccc; border-right: 1px solid #ccc — обводка с верху и с права серого цвета;
background-color:#f5f5f5 — цвет заднего фона;

Почему же, у нас сначала указана общая обводка, а затем обводка с верху и с права? Потому, что то, что идет после общей обводки имеет высший приоритет. Мы так же могли прописать обводку с лева и с низу, но это заняло бы большее место.

CSS-Code


font-family: Trebuchet MS; font-size:14px шрифт и размер текста;
text-shadow:1px 1px 0px #fff — тень у текста;

Теперь, наша таблица выглядит таким образом:


#3 И закончим JavaScript’ом:


Для того, чтобы подключить jQuery нам нужно прописать в теге head данный код:

HTML-Code

<script type="text/javascript" src="адрес до jquery документа"></script>

Для пользователей uCoz, библиотеку jQuery можно не подключать, так как она уже вшита в вашу страницу системой.

Теперь, займемся непосредственно скриптом. Это готовый код нашего скрипта, а каким образом он работает я расскажу чуть ниже.

JS-Code

$(document).ready(function(){
  $(".table tr:odd").addClass("second");
});

Все, что находится между данным кодом, происходит после полной прогрузки страницы:

JS-Code

$(document).ready(function(){
  Ваш скрипт здесь
});

Эта функция jQuery, которая позволяет вставлять скрипт в начала документа, до прогрузи используемых элементов. А в простом JS без использования jQ нельзя написать скрипт выше используемых элементов.

JS-Code

$(".table tr:odd") выбрать все четрные строки, из таблицы;
addClass("second") добавить им класс .second;

То есть, данный скрипт находит все строки таблицы с классом .table и добавляет каждой четной строке новый класс .second, у которого в свою очередь данный стиль:

JS-Code

.second td { background-color:#f0f0f0}

Который говорит, что задний фон всех ячеек, которые находятся в четных строках сменится на серый цвет.

Конечный вариант нашей таблицы выглядит так:


Категория: jQuery и JS | Добавил: tashkent97
Просмотров: 865 | Загрузок: 284 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<