基于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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
详解js实时获取并显示当前时间的方法
May 10 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python的装饰器使用详解
2017/06/26 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
利用python实现周期财务统计可视化
2019/08/25 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python获取栅格点和面值的实现
2020/03/10 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python3中布局背景颜色代码分析
2020/12/01 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
环保倡议书范文
2014/05/12 职场文书
学习十八大的心得体会
2014/09/12 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
小浪底导游词
2015/02/12 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers