Heim > Artikel > Web-Frontend > Beispielcode für die Verwendung von jQuery zum Ändern der Tabellenzeilenfarben
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!