如何使用JavaScript实现的斑马线表格效果

小编给大家分享一下如何使用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代码如下：



  
  
  




  
  
    
    
    
  
  
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
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实现的斑马线表格效果            

            文章路径：http://shouzuofang.com/article/jppjcc.html