我们在用Excel做表格时候,可以对表格设置颜色,单一的颜色的未免太单调,彩色条纹的表格效果更吸引人一些,而这一效果使用jQuery也可以实现,因此这篇文章就给大家分享怎样用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 属性。
以上就是jQuery创建有颜色表格的介绍了,有需要的朋友可以参考上述代码,希望能对大家学习jQuery插件有帮助,想要了解更多请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595