基于JavaScript实现表格隔行换色


Posted in Javascript onMay 08, 2020

表格隔行换色

需求分析

我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色

技术分析

table对象 集合 cells[]:返回包含表格中所有单元格的一个数组。 rows[]:返回包含表格中所有行的一个数组。 tBodies[]:返回包含表格中所有tbody 的一个数组。

步骤分析

确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script >
    function init(){
      //得到表格
      var tab = document.getElementById("tab");
      //得到表格中每一行
      var rows = tab.rows;
      //便利所有的行,然后根据奇数 偶数
      for(var i=1; i < rows.length; i++){
        var row = rows[i]; //得到其中的某一行
        if(i%2==0){
          row.bgColor = "yellow";
        }else{
          row.bgColor = "red"
        }
      }
    }
  </script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>分类ID</td>
    <td>分类名称</td>
    <td>分类商品</td>
    <td>分类描述</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>1</td>
    <td>手机数码</td>
    <td>华为,小米,尼康</td>
    <td>黑马数码产品质量最好</td>
    <td>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>2</td>
    <td>成人用品</td>
    <td>充气的</td>
    <td>这里面的充气电动硅胶的</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>3</td>
    <td>电脑办公</td>
    <td>联想,小米</td>
    <td>笔记本特卖</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>4</td>
    <td>馋嘴零食</td>
    <td>辣条,麻花,黄瓜</td>
    <td>年货</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>5</td>
    <td>床上用品</td>
    <td>床单,被套,四件套</td>
    <td>都是套子</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
</table>
</body>
</html>

基于JavaScript实现表格隔行换色

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JavaScript门道之标准库
May 26 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 #Javascript
基于JQuery实现页面定时弹出广告
May 08 #jQuery
使用vue cli4.x搭建vue项目的过程详解
May 08 #Javascript
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
基于JavaScript实现控制下拉列表
May 08 #Javascript
JS数组的常用10种方法详解
May 08 #Javascript
You might like
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js一组验证函数
2008/12/20 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python滑块验证码的破解实现
2019/11/10 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python将图片转base64,实现前端显示
2020/01/09 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
linux下进程间通信的方式
2013/01/23 面试题
大一新生学期自我评价
2014/04/09 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python