Zebra efekt na retke tablice sa CSS i JQuery

Dati snagu bolinhas Red, izmjenične boje redaka u HTML tablicama? Pomoću CSS i JQuery!

CSS i jQuery?

To je vlastitom nahođenju odabrati CSS (po mogućnosti) ili JQuery. U sljedećem primjeru, Odlučio sam stvoriti klasa .mytab u tom smislu, s naglaskom na bilo koji stol, Ali samo na one koji su označeni. U ovom slučaju, Morate navesti tablicu s klasa =”mytab”. Ako želite utjecati na sve tablice, Promjena .mytab prema oznaci Tablica. Učinili, Jednostavno unesite jedan od tih kodova između glave oznake i HTML spreman.

Kod koristeći CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:n-ti dijete(ak) {
    boja pozadine:#FFF;
  }  
  .mytab tr:n-ti dijete(Čak i) {
    boja pozadine:#CCC;
  } 
</stil>

Kod koristeći jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></skripta>
<script type="text/javascript">
$(dokument).spreman(funkcija() {
   $('. mytab tr:ak ').CSS('boja pozadine', '#ccc');
   $('. mytab tr:Čak i ").CSS('boja pozadine', '#fff');  
});
</skripta>

Primjer

Kompletan kod, u 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>
<glava>
<Naslov>Zebra</Naslov>
<style type="text/css">
  .mytab tr:n-ti dijete(ak) {
    boja pozadine:#FFF;
  }  
  .mytab tr:n-ti dijete(Čak i) {
    boja pozadine:#CCC;
  } 
</stil>
</glava>
<tijelo>
    <table class="mytab">
      <THEAD>
        <tr>
          <th>Redoslijed</th>
          <th>Ime</th>
          <th>Godina starosti</th>
          <th>Telefon</th>
        </tr>
      </THEAD>
      <TBODY>
        <tr>
          <TD>1</TD>
          <TD>Marija</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>Juca</TD>
          <TD>7</TD>
          <TD>8981-7822</TD>
        </tr>
      </TBODY>
    </Tablica>
  </tijelo>
</HTML>
Ukupno pogodaka: 8865

2 Komentari na “Zebra efekt na retke tablice sa CSS i JQuery

ostavi odgovor

Na vašu e-mail adresu će biti objavljen. Obavezna polja označena su sa *