十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下如何使用JavaScript实现的斑马线表格效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在做网站、成都网站制作中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十年了,客户满意度97.8%,欢迎成都创新互联客户联系。
具体如下:
虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外),所以今天使用原生JS实现了一个斑马线效果的表格,大家可以简单看一下,如果有需要可以留做脚本积累。
html表格部分:
Date | City | 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代码如下:
javascript斑马线表格
Date | City | 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~ |
以上是“如何使用JavaScript实现的斑马线表格效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!