本文實例講述了JavaScript實現的斑馬線表格效果。分享給大家供大家參考，具體如下：

雖然現在有很多框架可以輕松的實現斑馬線效果，而且兼容性也很不錯，比如bootstrap，但是不可否認的是使用JavaScript實現的是兼容性最強的(瀏覽器不支持或禁止JavaScript腳本除外)，所以今天使用原生JS實現了一個斑馬線效果的表格，大家可以簡單看一下，如果有需要可以留做腳本積累。

html表格部分：

DateCityVenue

2017-06-25

BJ

Ballroom2017-08-02

SH

Yoyoyo2017-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

/*判斷是否為奇數行

* 將第一行設置成true

* */

var odd = true;

var tr = table[i].getElementsByTagName("tr");

/*遍歷表格中的每一行*/

for(var j=0;j

if(odd){

addClass(tr[j],"stripe");

/*將下一行設置稱false*/

odd = false;

}else{

/*將下一行設置稱true*/

odd = true;

}

}

}

}

css部分：

* {

margin: 0;

padding: 0;

}

.stripe{

background-color: #eee;

}

完整index.html代碼如下：

javascript斑馬線表格

* {

margin: 0;

padding: 0;

}

.stripe{

background-color: #eee;

}

DateCityVenue

2017-06-25

BJ

Ballroom2017-08-02

SH

Yoyoyo2017-11-30

HZ

NOW~2017-11-30

HZ

NOW~2017-11-30

SJZ

NOW~

stripeTable();

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的HTML5制作斑马线表格,JavaScript实现的斑马线表格效果【隔行变色】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。