Sebra effekt på rader i tabeller med CSS og JQuery

Hvordan gi en effekt bolinhas rød, vekslende fargen på rad i din HTML-tabeller? Kan du med CSS og JQuery!

CSS og jQuery?

Det er ditt skjønn velger CSS (fortrinnsvis) eller JQuery. I eksemplet nedenfor, Jeg valgte å lage en klasse .mytab om dette, med fokus på tabellen, men bare på de som er angitt. I dette tilfellet, Du må angi tabellen med klassen =”mytab”. Hvis du vil endre alle tabeller, endre .mytab av tag tabell. Gjort dette, bare skriv en av disse kodene mellom HEAD-koder og HTML klar.

Kode ved hjelp av CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab St:NTH-barn(oddetall) {
    bakgrunnsfarge-:#FFF;
  }  
  .mytab St:NTH-barn(selv) {
    bakgrunnsfarge-:#CCC;
  } 
</stil>

Koden ved hjelp jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></skriptet>
<script type="text/javascript">
$(dokumentet).klar(funksjonen() {
   $(". mytab St:Odd ').CSS('background-color', '#ccc');
   $(". mytab St:selv ").CSS('background-color', '#fff');  
});
</skriptet>

Eksempel

Hele koden, i 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>
<hodet>
<tittel>Sebra</tittel>
<style type="text/css">
  .mytab St:NTH-barn(oddetall) {
    bakgrunnsfarge-:#FFF;
  }  
  .mytab St:NTH-barn(selv) {
    bakgrunnsfarge-:#CCC;
  } 
</stil>
</hodet>
<kroppen>
    <table class="mytab">
      <THEAD>
        <St>
          <th>Rekkefølge</th>
          <th>navn</th>
          <th>Alder</th>
          <th>Telefon</th>
        </St>
      </THEAD>
      <TBODY>
        <St>
          <TD>1</TD>
          <TD>Maria</TD>
          <TD>45</TD>
          <TD>3434-6767</TD>
        </St>
        <St>
          <TD>2</TD>
          <TD>John</TD>
          <TD>12</TD>
          <TD>4545-9009</TD>
        </St>
        <St>
          <TD>3</TD>
          <TD>Marcos</TD>
          <TD>33</TD>
          <TD>9987-7655</TD>
        </St>
        <St>
          <TD>4</TD>
          <TD>Claudia</TD>
          <TD>21</TD>
          <TD>3409-5652</TD>
        </St>
        <St>
          <TD>5</TD>
          <TD>Juca</TD>
          <TD>7</TD>
          <TD>8981-7822</TD>
        </St>
      </TBODY>
    </tabell>
  </kroppen>
</HTML>
Totalt antall treff: 8880

2 kommentarer på “Sebra effekt på rader i tabeller med CSS og JQuery

legg igjen et svar

Den e-postadressen din vil ikke bli publisert. Obligatoriske felt er merket med *