Efekt Zebra w wierszach tabel z CSS i JQuery

Jak o dając efekt bolinhas czerwony, zmianę kolorów wierszy w tabelach HTML? Z CSS i JQuery można!

CSS i jQuery?

To Twoje uznania wybrać CSS (najlepiej) lub JQuery. W poniższym przykładzie, Zdecydował się stworzyć klasę .mytab w tym celu koncentrując się na każdym stole, ale tylko na te, które są wyznaczone. W takim przypadku, Należy określić tabelę z klasy =”mytab”. Jeśli chcesz mieć wpływ na wszystkie tabele, zmiana .mytab przez tag stół. To zrobione, po prostu wprowadź jeden z poniższych kodów między znaczniki nagłówka i HTML gotowy.

Kod za pomocą CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:n dziecko(Odd) {
    kolor tła:#FFF;
  }  
  .mytab tr:n dziecko(nawet) {
    kolor tła:#CCC;
  } 
</styl>

Kod przy użyciu jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></skrypt>
<script type="text/javascript">
$(dokumentu).gotowe(Funkcja() {
   $('. mytab tr:dziwne ').CSS('kolor tła', '#ccc');
   $('. mytab tr:nawet ').CSS('kolor tła', '#fff');  
});
</skrypt>

Przykład

Kompletny kod, w 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>
<Głowica>
<tytuł>Zebra</tytuł>
<style type="text/css">
  .mytab tr:n dziecko(Odd) {
    kolor tła:#FFF;
  }  
  .mytab tr:n dziecko(nawet) {
    kolor tła:#CCC;
  } 
</styl>
</Głowica>
<ciało>
    <table class="mytab">
      <THEAD>
        <TR>
          <th>Zamówienia</th>
          <th>Nazwa</th>
          <th>Wiek</th>
          <th>Telefon</th>
        </TR>
      </THEAD>
      <TBODY>
        <TR>
          <TD>1</TD>
          <TD>Maria</TD>
          <TD>45</TD>
          <TD>3434-6767</TD>
        </TR>
        <TR>
          <TD>2</TD>
          <TD>John</TD>
          <TD>12</TD>
          <TD>4545-9009</TD>
        </TR>
        <TR>
          <TD>3</TD>
          <TD>Marcos</TD>
          <TD>33</TD>
          <TD>9987-7655</TD>
        </TR>
        <TR>
          <TD>4</TD>
          <TD>Claudia</TD>
          <TD>21</TD>
          <TD>3409-5652</TD>
        </TR>
        <TR>
          <TD>5</TD>
          <TD>Juliano Roberto Antonello</TD>
          <TD>7</TD>
          <TD>8981-7822</TD>
        </TR>
      </TBODY>
    </stół>
  </ciało>
</HTML>
Całkowitej trafienia: 8880

2 Komentarze na temat “Efekt Zebra w wierszach tabel z CSS i JQuery

Odpowiedz

Twój adres e-mail nie zostaną opublikowane. Wymagane pola są oznaczone *