基于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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS高级运动实例分析
Dec 20 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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之PHP语法学习笔记1
2006/12/17 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
python调用shell的方法
2013/11/20 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
数据库测试通常都包括哪些方面
2015/11/30 面试题
咖啡馆创业计划书
2014/01/26 职场文书
应届生求职信范文
2014/05/26 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
入党函调证明材料
2015/06/19 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
分析Python list操作为什么会错误
2021/11/17 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android