本文实例讲述了JavaScript实现的斑马线表格效果。分享给大家供大家参考，具体如下：
虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外)，所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。
html表格部分：
DateCityVenue
-06-25
BJ
Ballroom-08-02
SH
Yoyoyo-11-30
HZ
NOW~-11-30
HZ
NOW~-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
/*判断是否为奇数行
* 将第一行设置成true
* */
var odd = true;
var tr = table[i].getElementsByTagName("tr");
/*遍历表格中的每一行*/
for(var j=0;j
if(odd){
addClass(tr[j],"stripe");
/*将下一行设置称false*/
odd = false;
}else{
/*将下一行设置称true*/
odd = true;
}
}
}
}
css部分：
* {
margin: 0;
padding: 0;
}
.stripe{
background-color: #eee;
}
完整index.html代码如下：
javascript斑马线表格
* {
margin: 0;
padding: 0;
}
.stripe{
background-color: #eee;
}
DateCityVenue
-06-25
BJ
Ballroom-08-02
SH
Yoyoyo-11-30
HZ
NOW~-11-30
HZ
NOW~-11-30
SJZ
NOW~
stripeTable();
希望本文所述对大家JavaScript程序设计有所帮助。
