虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用javascript实现的是兼容性最强的（浏览器不支持或禁止javascript脚本除外），所以今天使用原生js实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。本文主要和大家介绍了javascript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下，希望能帮助到大家。
html表格部分：
登录后复制
DateCity
Venue
2017-06-25 BJ Ballroom 2017-08-02 SH Yoyoyo 2017-11-30 HZ NOW~ 2017-11-30 HZ NOW~ 2017-11-30 SJZ NOW~
script.js
function addClass(element, value) {//element:需要添加新样式的元素，value：新的样式 if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName += " "; newClassName += value; element.className = newClassName; }}function stripeTable(){ if(!document.getElementsByTagName("table")) return false; /*获取table*/ var table = document.getElementsByTagName("table"); /*遍历 为所有表格添加*/ for(var i=0;i
登录后复制
css部分：
* { margin: 0; padding: 0;}.stripe{ background-color: #eee;}
登录后复制
完整index.html代码如下：
立即学习“Java免费学习笔记（深入）”；
nbsp;html>javascript斑马线表格 * { margin: 0; padding: 0; } .stripe{ background-color: #eee; }
登录后复制
DateCity
Venue
2017-06-25 BJ Ballroom 2017-08-02 SH Yoyoyo 2017-11-30 HZ NOW~ 2017-11-30 HZ NOW~ 2017-11-30 SJZ NOW~ stripeTable();
相关推荐：
jquery简单实现隔行变色方法
JS控制表格隔行变色的实现代码展示
JS实现列表页面隔行变色效果的示例代码分享
以上就是JavaScript实现斑马线表格示例分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2786647.html
