基于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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
vue 扩展现有组件的操作
Aug 14 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简单系统查询模块代码打包下载
2008/06/07 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
基于php编程规范(详解)
2017/08/17 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
图片之间的切换
2006/06/26 Javascript
jQuery入门知识简介
2010/03/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
如何编写jquery插件
2017/03/29 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
通用自荐信范文
2014/03/14 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
股权转让协议范本
2014/12/07 职场文书
高考1977观后感
2015/06/04 职场文书
负责培养人意见
2015/06/05 职场文书
创业计划书之养殖业
2019/10/11 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript