Zebra učinek, vrstice tabel z CSS ali JQuery

Kaj pa daje učinek bolinhas rdeča, izmenično barve vrstic v HTML tabele? Z CSS ali JQuery lahko!

CSS ali jQuery?

To je, po lastni presoji izbere CSS (po možnosti) ali JQuery. V tem primeru, Sem se odločil tvoriti a razred .mytab v tem smislu se osredotoča na vse tabele, vendar samo na tiste, ki so določeni. V tem primeru, Določite tabelo z razred =”mytab”. Če želite, da vplivajo na vse tabele, spremembe .mytab z oznako Tabela. Velja to, preprosto vnesite eno od teh kod med glavo tags in HTML, ki so pripravljeni.

Kodo, ki uporablja CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:n-otrok(čudno) {
    barva ozadja:#FFF;
  }  
  .mytab tr:n-otrok(celo) {
    barva ozadja:#CCC;
  } 
</slog>

Kodo, ki uporablja jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></scenarij>
<script type="text/javascript">
$(dokument).pripravljen(Funkcija() {
   $(". mytab tr:čuden ").CSS("barva ozadja", "#ccc");
   $(". mytab tr:tudi ").CSS("barva ozadja", "#fff");  
});
</scenarij>

Primer

Celotno kodo, v 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>
<vodja>
<naslov>Zebra</naslov>
<style type="text/css">
  .mytab tr:n-otrok(čudno) {
    barva ozadja:#FFF;
  }  
  .mytab tr:n-otrok(celo) {
    barva ozadja:#CCC;
  } 
</slog>
</vodja>
<telo>
    <table class="mytab">
      <THEAD>
        <tr>
          <th>Vrstni red</th>
          <th>ime</th>
          <th>Starost</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>Juca</TD>
          <TD>7</TD>
          <TD>8981-7822</TD>
        </tr>
      </TBODY>
    </Tabela>
  </telo>
</HTML>
Skupaj zadetkov: 8880

2 pripombe na “Zebra učinek, vrstice tabel z CSS ali JQuery

pusti odgovor

Na vaš e-poštni naslov ne bo objavljen. Zahtevana polja so označena z *