JavaScript实现斑马线表格示例分享

来源：宝玛科技网

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的（浏览器不支持或禁止JavaScript脚本除外），所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。本文主要和大家介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下，希望能帮助到大家。

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

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实现斑马线表格示例分享