您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用jQuery創(chuàng)建彩色條紋表格效果”,在日常操作中,相信很多人在怎么用jQuery創(chuàng)建彩色條紋表格效果問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用jQuery創(chuà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; } h2 { 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> <h2> 億速云 </h2> <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 屬性。
到此,關于“怎么用jQuery創(chuàng)建彩色條紋表格效果”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。