站长资讯网在上一篇《挑战怎么在不使用标签的情况下创建表？》中给大家介绍了怎么在不使用标签的情况下创建表，需要的朋友可以去了解一下~
本文的主要内容则是教大家用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基础教程》！
