JavaScript implementation of zebra crossing table example sharing

Although there are many frameworks that can easily achieve the zebra crossing effect, and the compatibility is also very good, such as bootstrap, it is undeniable that the implementation using JavaScript is the most compatible (except for browsers that do not support or prohibit JavaScript scripts) ), so today I used native JS to implement a table with a zebra crossing effect. You can take a brief look at it, and save it for script accumulation if necessary. This article mainly introduces the zebra crossing table effect realized by JavaScript. It uses JavaScript to traverse and operate the table table to realize the interlaced color changing function. It is very simple and practical. Friends who need it can refer to it. I hope it can help you.

html table part:

 
 
 
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
        

         Copy after login
        
       

css part:

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

The complete index.html code is as follows:

         
         

          

           
          
         
         

          

           
          
         
 
 
 
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~
 
 
 
 

Related recommendations:

jquery Simple method to realize interlaced color change

JS control table interlaced color change implementation code display

JS example code sharing for realizing interlaced line color change effect on list page

The above is the detailed content of JavaScript implementation of zebra crossing table example sharing. For more information, please follow other related articles on the PHP Chinese website!