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

小编给大家分享一下如何使用JavaScript实现的斑马线表格效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

做网站、成都网站制作中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十年了,客户满意度97.8%,欢迎成都创新互联客户联系。

具体如下:

虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外),所以今天使用原生JS实现了一个斑马线效果的表格,大家可以简单看一下,如果有需要可以留做脚本积累。

html表格部分:


  
  
    
    
    
  
  
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
DateCityVenue
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代码如下:




  
  javascript斑马线表格
  




  
  
    
    
    
  
  
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
  
DateCityVenue
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://scyanting.com/article/jppjcc.html