JavaScript实现斑马线表格示例分享

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用javascript实现的是兼容性最强的（浏览器不支持或禁止javascript脚本除外），所以今天使用原生js实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。本文主要和大家介绍了javascript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下，希望能帮助到大家。

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代码如下：
立即学习“Java免费学习笔记（深入）”；

							

								
								

									HaiSnap
									
一站式AI应用开发和部署工具
								
								下载 
							
						




  
  
  




  

  

    
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~
  
  



相关推荐：
jquery简单实现隔行变色方法
JS控制表格隔行变色的实现代码展示
JS实现列表页面隔行变色效果的示例代码分享