JavaScript实现的斑马线表格效果

本文实例讲述了Javascript实现的斑马线表格效果。分享给大家供大家参考，具体如下：

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如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;
  
  var table = document.getElementsByTagName("table");
  
  for(var i=0;i

css部分：

* {
  margin: 0;
  padding: 0;
}
.stripe{
  background-color: #eee;
}



完整index.html代码如下：




  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    .stripe{
      background-color: #eee;
    }
  




  

  

    
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相关内容感兴趣的读者可查看本站专题：《Javascript表格(table)操作技巧大全》、《Javascript操作DOM技巧总结》、《Javascript遍历算法与技巧总结》、《Javascript数学运算用法总结》、《Javascript数据结构与算法技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》
希望本文所述对大家Javascript程序设计有所帮助。