Heim > Artikel > Web-Frontend > Beispielcode für die Verwendung von jQuery zum Ändern der Tabellenzeilenfarben

Beispielcode für die Verwendung von jQuery zum Ändern der Tabellenzeilenfarben

小云云Original: 2017-12-29 13:46:411636Durchsuche

Dieser Artikel zeigt Ihnen ein einfaches Beispiel für die Verwendung von JQ zum Ändern der Farbe alternativer Zeilen in einer Tabelle. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Schrittanalyse:

Der erste Schritt: Einführung der JQuery-Klassenbibliothek

Der zweite Schritt: Schreiben Sie direkt die Seitenladefunktion

Der dritte Schritt: Verwenden Sie direkt den Selektor von jquery (Kombinationsauswahl), um die Elemente abzurufen, die bedient werden müssen (ungerade Zeilen und gerade Zeilen).

Schritt 4: Verwenden Sie die CSS-Methode (css(name, value)) für ungerade Zeilen bzw. gerade nummerierte Zeilen legen die Hintergrundfarbe fest.

2. Spezifische Code-Implementierung:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").css("background-color","gold");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("tbody tr:odd").css("background-color","pink");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>张三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>赵六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

3. Während der eigentlichen Entwicklung wurde der allgemeine CSS-Stil vom Künstler geschrieben. Zu diesem Zeitpunkt können Sie die CSS-Klassenoperation

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <link rel="stylesheet" href="../css/style.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").addClass("even");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("tbody tr:odd").addClass("odd");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>张三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>赵六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Führen Sie ihn in Google Chrome aus, um den Effekt zu erzielen, dass die Farbe der Tabelle jede zweite Zeile geändert wird.

Verwandte Empfehlungen:

So verwenden Sie % von JavaScript, um Interlaced-Farbwechsel durchzuführen

CSS-Interlaced-Farbwechsel-Tutorial

So verwenden Sie JSTL, um die Farbe von Tabellen in abwechselnden Zeilen zu ändern

Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von jQuery zum Ändern der Tabellenzeilenfarben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie mit, wie Sie das jQuery-Bildzoom-Plug-in smartZoom verwendenNächster Artikel：Teilen Sie mit, wie Sie das jQuery-Bildzoom-Plug-in smartZoom verwenden

In Verbindung stehende Artikel

Mehr sehen