在上一篇《挑战怎么在不使用标签的情况下创建表？》中给大家介绍了怎么在不使用标签的情况下创建表，需要的朋友可以去了解一下~
本文的主要内容则是教大家用jQuery创建彩色条纹表格效果。
千篇一律的表格样式大家可能已经腻了吧，今天就给大家介绍怎么建立彩色条纹的表格效果，需要的朋友就不要错过本文啦~
下面我们直接看到代码：
jquery实现彩色条纹表格 $(function() { $("table tr:nth-child(odd)") .addClass("zebrastripe"); }); 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; }PHP中文网
登录后复制
ID姓名
分数
1 张三 112 2 李四 109 3 王二 123 5 赵五 108 6 周六 122
效果如下：
在上述代码中给大家介绍一段代码：
$(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创建彩色条纹表格效果？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2708636.html
