小编给大家分享一下如何使用JavaScript实现的斑马线表格效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
具体如下：
虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的（浏览器不支持或禁止JavaScript脚本除外），所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。
html表格部分：
<table> <thead> <tr> <th>Date</th> <th>City</th> <th>Venue</th> </tr> </thead> <tbody> <tr> <td>2017-06-25</td> <td> <abbr title="BeiJing">BJ</abbr> </td> <td>Ballroom</td> </tr> <tr> <td>2017-08-02</td> <td> <abbr title="ShangHai">SH</abbr> </td> <td>Yoyoyo</td> </tr> <tr> <td>2017-11-30</td> <td> <abbr title="HangZhou">HZ</abbr> </td> <td>NOW~</td> </tr> <tr> <td>2017-11-30</td> <td> <abbr title="HangZhou">HZ</abbr> </td> <td>NOW~</td> </tr> <tr> <td>2017-11-30</td> <td> <abbr title="ShiJiaZhuang">SJZ</abbr> </td> <td>NOW~</td> </tr> </tbody> </table>
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<table.length;i++){
/*判断是否为奇数行
* 将第一行设置成true
* */
var odd = true;
var tr = table[i].getElementsByTagName("tr");
/*遍历表格中的每一行*/
for(var j=0;j<tr.length;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代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript斑马线表格</title>
<style>
* {
margin: 0;
padding: 0;
}
.stripe{
background-color: #eee;
}
</style>
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Date</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>2017-06-25</td>
<td>
<abbr title="BeiJing">BJ</abbr>
</td>
<td>Ballroom</td>
</tr>
<tr>
<td>2017-08-02</td>
<td>
<abbr title="ShangHai">SH</abbr>
</td>
<td>Yoyoyo</td>
</tr>
<tr>
<td>2017-11-30</td>
<td>
<abbr title="HangZhou">HZ</abbr>
</td>
<td>NOW~</td>
</tr>
<tr>
<td>2017-11-30</td>
<td>
<abbr title="HangZhou">HZ</abbr>
</td>
<td>NOW~</td>
</tr>
<tr>
<td>2017-11-30</td>
<td>
<abbr title="ShiJiaZhuang">SJZ</abbr>
</td>
<td>NOW~</td>
</tr>
</tbody>
</table>
<script>
stripeTable();
</script>
</body>
</html>以上是“如何使用JavaScript实现的斑马线表格效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
