JavaScript实现的斑马线表格效果【隔行变色】
本文实例讲述了JavaScript实现的斑马线表格效果。分享给大家供大家参考，具体如下：
虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的（浏览器不支持或禁止JavaScript脚本除外），所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。
html表格部分：
| Date | City | Venue |
|---|---|---|
| 2017-06-25 |
|
Ballroom |
| 2017-08-02 |
|
Yoyoyo |
| 2017-11-30 |
|
NOW~ |
| 2017-11-30 |
|
NOW~ |
| 2017-11-30 |
|
NOW~ |
script.js
functionaddClass(element,value){//element:需要添加新样式的元素，value：新的样式
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+="";
newClassName+=value;
element.className=newClassName;
}
}
functionstripeTable(){
if(!document.getElementsByTagName("table"))returnfalse;
/*获取table*/
vartable=document.getElementsByTagName("table");
/*遍历为所有表格添加*/
for(vari=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~