Beispielcode für die Verwendung von jQuery zum Ändern der Tabellenzeilenfarben-js-Tutorial-php.cn

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

小云云

Freigeben： 2017-12-29 13:46:41

Original

1644 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!