Зебра эффект на строк таблицы с CSS и JQuery

Как насчет дает эффект Тригу красный, чередующиеся цвета строк в таблицах HTML? С помощью CSS и JQuery Вы можете!

CSS и jQuery?

Это ваше усмотрение выбрать CSS (предпочтительно) или JQuery. В следующем примере, Я выбрал для создания класса .MyTab в этой связи сосредоточив внимание на любом столе, но только на те, которые обозначены. В этом случае, Вам необходимо указать ваши таблицы с классом =”MyTab”. Если вы хотите влиять на всех таблиц, изменить .MyTab по тегу Таблица. Готово, что, просто введите один из этих кодов между тегами HEAD и готовый HTML.

Код с помощью CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .MyTab tr:энный ребенку(нечетные) {
    цвет фона:#FFF;
  }  
  .MyTab tr:энный ребенку(даже) {
    цвет фона:#CCC;
  } 
</стиль>

Код, с помощью jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></сценарий>
<script type="text/javascript">
$(документ).готов(Функция() {
   $('. mytab tr:нечетные ').CSS(«цвет фона», «#ccc»);
   $('. mytab tr:даже ').CSS(«цвет фона», «#fff»);  
});
</сценарий>

Пример

Полный код, в CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<HTML>
<Руководитель>
<Название>Зебра</Название>
<style type="text/css">
  .MyTab tr:энный ребенку(нечетные) {
    цвет фона:#FFF;
  }  
  .MyTab tr:энный ребенку(даже) {
    цвет фона:#CCC;
  } 
</стиль>
</Руководитель>
<тело>
    <table class="mytab">
      <THEAD>
        <TR>
          <TH>Заказ</TH>
          <TH>Имя</TH>
          <TH>Возраст</TH>
          <TH>Телефон</TH>
        </TR>
      </THEAD>
      <TBODY>
        <TR>
          <ТД>1</ТД>
          <ТД>Мария</ТД>
          <ТД>45</ТД>
          <ТД>3434-6767</ТД>
        </TR>
        <TR>
          <ТД>2</ТД>
          <ТД>Джон</ТД>
          <ТД>12</ТД>
          <ТД>4545-9009</ТД>
        </TR>
        <TR>
          <ТД>3</ТД>
          <ТД>Марк</ТД>
          <ТД>33</ТД>
          <ТД>9987-7655</ТД>
        </TR>
        <TR>
          <ТД>4</ТД>
          <ТД>Клаудия</ТД>
          <ТД>21</ТД>
          <ТД>3409-5652</ТД>
        </TR>
        <TR>
          <ТД>5</ТД>
          <ТД>Джука</ТД>
          <ТД>7</ТД>
          <ТД>8981-7822</ТД>
        </TR>
      </TBODY>
    </Таблица>
  </тело>
</HTML>
Всего просмотров: 8885

2 Комментарии по “Зебра эффект на строк таблицы с CSS и JQuery

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *