在上一篇《挑戰怎麼在不使用標籤的情況下建立表格? 》中跟大家介紹了怎麼在不使用標籤的情況下創建表,需要的朋友可以去了解一下~
本文的主要內容則是教大家用jQuery創建彩色條紋表格效果。
千篇一律的表格樣式大家可能已經膩了吧,今天就給大家介紹怎麼建立彩色條紋的表格效果,需要的朋友就不要錯過本文啦~
下面我們直接看到程式碼:
<html> <head> <meta charset="UTF-8"> <title>jquery实现彩色条纹表格</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中文网 </h1> <table class="center"> <tr> <th>ID</th> <th>姓名</th> <th>分数</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"); });
在這裡的函數中,zebrastripe是使用的類別名,odd表示奇數行將具有彩色條紋。
如果要更改偶數行條紋,只需使用:
$(function() { $("table tr:nth-child(even)").addClass("zebrastripe"); })
註:
nth-child(n)
選擇器選取屬於其父元素的不限類型的第 n 個子元素的所有元素。
addClass()
方法將被選元素新增一個或多個類,該方法不會移除已存在的 class 屬性,只新增一個或多個 class 屬性。
PHP中文網路平台有非常多的影片教學資源,歡迎大家學習《jquery影片教學》《javascript基礎教學》!
以上是如何使用jQuery創建彩色條紋表格效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!