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


Posted in Javascript onSeptember 18, 2017

本文实例讲述了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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 #Javascript
javascript流程控制语句集合
Sep 18 #Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 #Javascript
Angular中的$watch方法详解
Sep 18 #Javascript
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
node.js中使用Export和Import的方法
Sep 18 #Javascript
inner join 内联与left join 左联的实例代码
Sep 18 #Javascript
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python猴子补丁知识点总结
2020/01/05 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
实习心得体会
2014/01/02 职场文书
教师求职信范文
2014/05/24 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
学习保证书100字
2015/02/26 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js