基于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参考实例 1.0 jQuery的哲学
Apr 07 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
js+css实现红包雨效果
2018/07/12 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python实现简单图书管理系统
2019/11/22 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
小学英语教学反思
2014/01/30 职场文书
会计实训报告范文
2014/11/04 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
同学聚会开幕词
2019/04/02 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS