基于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 相关文章推荐
js jq 单击和双击区分示例介绍
Nov 05 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
微信小程序 教程之模板
Oct 18 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
对vuex中store和$store的区别说明
Jul 24 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
html下载本地
2006/06/19 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
wxpython实现图书管理系统
2018/03/12 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
详解Python装饰器
2019/03/25 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
绩效考核实施方案
2014/03/18 职场文书
合作意向协议书范本
2014/03/31 职场文书
七夕活动策划方案
2014/08/16 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
大学生军训感言
2015/08/01 职场文书