JavaScript实现的斑马线表格效果【隔行变色】

2019-11-19 15:24:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery选择器之子元素选择器详解

下一篇：js实现可以点击收缩或张开的悬浮窗