基于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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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 JSON 数据解析代码
2010/05/26 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python实现猜数字游戏
2020/03/25 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
远程研修随笔感言
2014/02/10 职场文书
青年文明号复核材料
2014/02/11 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
企业诚信承诺书
2014/05/23 职场文书
工作表扬信范文
2015/01/17 职场文书
项目负责人岗位职责
2015/02/15 职场文书
同学毕业留言寄语
2015/02/27 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书