Zebrastreifeneffekt auf Zeilen von Tabellen mit CSS oder JQuery

Wie wäre es mit einer Effekt-Bolinhas rot, abwechselnd die Farbe der Zeilen in den HTML-Tabellen? Mit CSS oder JQuery können Sie!

CSS oder jQuery?

Es ist Ihrem Ermessen wählen CSS (vorzugsweise) oder JQuery. Im folgenden Beispiel, Ich entschied mich für eine Klasse erstellen .MyTab zu diesem Zweck konzentriert sich auf jedem Tisch, aber nur auf diejenigen, die bestimmt sind. In diesem Fall, Müssen Sie Ihren Tisch mit Klasse angeben =”MyTab”. Möchten Sie alle Tabellen beeinflussen, ändern .MyTab nach Tags Tabelle. Dies getan, Geben Sie einen der folgenden Codes einfach zwischen den HEAD-Tags und HTML bereit.

Mit Hilfe von CSS Code

1
2
3
4
5
6
7
8
<style type="text/css">
  .MyTab tr:nth-child(ungerade) {
    Hintergrund-Farbe:#FFF;
  }  
  .MyTab tr:nth-child(Sogar) {
    Hintergrund-Farbe:#CCC;
  } 
</Stil>

Code mit jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></Skript>
<script type="text/javascript">
$(Dokument).bereit(Funktion() {
   $('. Mytab tr:ungerade ").CSS("Background-Color", "#ccc");
   $('. Mytab tr:sogar ").CSS("Background-Color", "#fff");  
});
</Skript>

Beispiel

Komplette code, in 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>
<Kopf>
<Titel>Zebra</Titel>
<style type="text/css">
  .MyTab tr:nth-child(ungerade) {
    Hintergrund-Farbe:#FFF;
  }  
  .MyTab tr:nth-child(Sogar) {
    Hintergrund-Farbe:#CCC;
  } 
</Stil>
</Kopf>
<Körper>
    <table class="mytab">
      <THEAD>
        <TR>
          <th>Bestellung</th>
          <th>Name</th>
          <th>Alter</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>
    </Tabelle>
  </Körper>
</html>
Total hits: 8865

2 Kommentare zu “Zebrastreifeneffekt auf Zeilen von Tabellen mit CSS oder JQuery

Hinterlasse eine Antwort

Die e-Mailadresse wird nicht veröffentlicht. Pflichtfelder sind mit gekennzeichnet. *