Zebra ietekme uz galdiem ar CSS vai JQuery rindas

Kā par norādot efekts bolinhas Red, mainīgu rindu HTML tabulas krāsu? Ar CSS vai JQuery var!

CSS vai jQuery?

Tas ir jūsu ieskatiem izvēlēties CSS (vēlams) vai JQuery. Tālāk redzamajā piemērā, Es nolēmu izveidot klasi .mytab lai to panāktu, koncentrējoties uz jebkuru tabulu, bet tikai uz tiem, kas norādīti. Šajā gadījumā, Jānorāda tabulas ar klasi =”mytab”. Ja vēlaties ietekmēt visas tabulas, izmaiņas .mytab pēc atzīmes tabula. Izdarījusi, vienkārši ievadiet vienu no šiem kodiem līdz galvas tagus HTML gatavs.

Kodu, izmantojot CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:n-bērnu(nepāra) {
    fona krāsu:#FFF;
  }  
  .mytab tr:n-bērnu(pat) {
    fona krāsu:#CCC;
  } 
</stils>

Kodu, izmantojot 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">
$(dokumentu).gatavs(funkcija() {
   $('. mytab tr:nepāra ').CSS('fona krāsa', '#ccc');
   $('. mytab tr:pat ').CSS('fona krāsa', '#fff');  
});
</skripta>

Piemērs

Pilnīgs kods, 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>
<vadītājs>
<nosaukums>Zebra</nosaukums>
<style type="text/css">
  .mytab tr:n-bērnu(nepāra) {
    fona krāsu:#FFF;
  }  
  .mytab tr:n-bērnu(pat) {
    fona krāsu:#CCC;
  } 
</stils>
</vadītājs>
<organizācija>
    <table class="mytab">
      <TABULAS GALVENES>
        <TR>
          <th>Pasūtījuma</th>
          <th>vārds</th>
          <th>Vecums</th>
          <th>Tālrunis</th>
        </TR>
      </TABULAS GALVENES>
      <TABULAS PAMATTEKSTA>
        <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>
      </TABULAS PAMATTEKSTA>
    </tabula>
  </organizācija>
</HTML>
Kopā hits: 8883

2 komentāri par “Zebra ietekme uz galdiem ar CSS vai JQuery rindas

atstāt atbildi

E-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti ar *