站長資訊網(wǎng)在上一篇《挑戰(zhàn)怎么在不使用標簽的情況下創(chuàng)建表？》中給大家介紹了怎么在不使用標簽的情況下創(chuàng)建表，需要的朋友可以去了解一下~
本文的主要內(nèi)容則是教大家用jQuery創(chuàng)建彩色條紋表格效果。
千篇一律的表格樣式大家可能已經(jīng)膩了吧，今天就給大家介紹怎么建立彩色條紋的表格效果，需要的朋友就不要錯過本文啦~
下面我們直接看到代碼：
<html> <head> <meta charset="UTF-8"> <title>jquery實現(xiàn)彩色條紋表格</title> <script type="text/javascript" src= "https://code.jquery.com/jquery-3.5.1.js"> </script> <script type="text/javascript"> $(function() { $("table tr:nth-child(odd)") .addClass("zebrastripe"); }); </script> <style type="text/css"> body, td { font-size: 10pt; text-align: center; } h1 { color: green; } table { background-color: black; border: 1px black solid; border-collapse: collapse; } th { font-size: 15px; padding: 5px 8px; border: 1px outset silver; background-color: rgb(197, 69, 69); color: white; } tr { border: 1px outset silver; padding: 5px 8px; background-color: white; margin: 1px; } tr.zebrastripe { background-color: green; } td { border: 0.5px outset silver; border-collapse: collapse; padding: 5px 8px; } .center { margin-left: auto; margin-right: auto; } </style> </head> <body> <h1> PHP中文網(wǎng) </h1> <table class="center"> <tr> <th>ID</th> <th>姓名</th> <th>分數(shù)</th> </tr> <tr> <td>1</td> <td>張三</td> <td>112</td> </tr> <tr> <td>2</td> <td>李四</td> <td>109</td> </tr> <tr> <td>3</td> <td>王二</td> <td>123</td> </tr> <tr> <td>5</td> <td>趙五</td> <td>108</td> </tr> <tr> <td>6</td> <td>周六</td> <td>122</td> </tr> </table> </body> </html>
效果如下：
在上述代碼中給大家介紹一段代碼：
$(function() { $("table tr:nth-child(odd)").addClass("zebrastripe"); });
在這里的函數(shù)中，zebrastripe是使用的類名，odd表示奇數(shù)行將具有彩色條紋。
如果要更改偶數(shù)行條紋，只需使用：
$(function() { $("table tr:nth-child(even)").addClass("zebrastripe"); })
注：
nth-child(n) 選擇器選取屬于其父元素的不限類型的第 n 個子元素的所有元素。
addClass() 方法向被選元素添加一個或多個類，該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。
PHP中文網(wǎng)平臺有非常多的視頻教學資源，歡迎大家學習《jquery視頻教程》《javascript基礎教程》！
