原理其实很简单:利用getElementsByTagName得到所有的

元素,然后分别为奇数项和偶数项的元素添加背景颜色。

核心代码:

function color() {

//把表头设为紫色

var th = document.getElementById("th");

th.style.background = "violet"

//1.得到所有

元素

var trs = document.getElementsByTagName("tr");

var i;

for(i = 1; i

//2.改变

元素的背景颜色

if(i % 2 == 0) {

trs[i].style.background = "yellow";

} else {

trs[i].style.background = "olive";

}

}

}

window.onload = color;

全部代码:

双色表格

function color() {

//把表头设为紫色

var th = document.getElementById("th");

th.style.background = "violet"

//1.得到所有

元素

var trs = document.getElementsByTagName("tr");

var i;

for(i = 1; i

//2.改变

元素的背景颜色

if(i % 2 == 0) {

trs[i].style.background = "yellow";

} else {

trs[i].style.background = "olive";

}

}

}

window.onload = color;

姓名 科目 成绩
张三 语文 90
张三 数学 87
李四 数学 68
王五 英语 76

html 偶数项 替换,JS通过奇数项和偶数项实现两种背景颜色的表格实现代码相关推荐

  1. [js] axios为什么可以使用对象和函数两种方式调用?是如何实现的?

    [js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码 初始化 看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...

  2. 利用jquery的qrcode.js插件生成二维码的两种方式的使用

    2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...

  3. oracle 判断是否位汉字,js判断字符是否是汉字的两种方法小结

    有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 1.用正则表达式判断 js判断字符是否是汉字 .co ...

  4. php动态加载js,动态加载script文件的两种方法_javascript技巧

    动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...

  5. 使用ArcGIS JS API加载WMTS图层的两种方式

    文章目录 前言 方式一 方式二 前言 某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...

  6. node.js 获取异步方法里面的数据 =》 两种方式

    第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...

  7. js分页页码显示逻辑实现的两种方法

    第一种:之前在项目中用到的比较笨重的方式,纯代码的形式实现,用到<c:if>判断,有需要的朋友可作参考,自定义样式就可以实现想要的分页效果. page.pageNo = 当前页数 page ...

  8. JS字符串中的第一个字母大写(两种方法)

    如何将字符串中的第一个字母大写 一个非常常见的操作是将字符串的第一个字母大写.虽然许多编程语言都有一种本地方法来实现这一点,但 JS 需要做一些工作. <!DOCTYPE HTML> &l ...

  9. html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式

    checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...

最新文章

  1. 让你二十年后仍是人才
  2. 从今天要开始复习和提升linux了, 为期 2月, 加油
  3. a bytes-like object is required, not 'str' pickle.loads pickle.dumps
  4. JavaScript的5种调用函数的方法
  5. Package name must have at least two identifiers 解决办法
  6. 一个方法多个return_用这个方法可以快速、准确地记住一个单词的多个词义
  7. Java构造字符串算法题_LeetCode算法题-Repeated Substring Pattern(Java实现)
  8. excel去除html格式化,带有标签的HTML文本,用于在Excel单元格中格式化文本
  9. QT每日一练day3:Qt的编译机制
  10. Unity3d:Unknown type 'System.Collections.Generic.CollectionDebuggerView'1
  11. 转hdmi_LT8619CHDMI转LVDS-HDMI支持高达4Kx2K_30Hz的分辨率
  12. 易语言取linux命令返回值,易语言返回命令使用讲解
  13. CAM是利用计算机,利用DroidCam将手机摄像头打造成计算机摄像头
  14. Java工程师成神之路(2018修订版)
  15. 台式计算机 如何组装,如何自行组装台式计算机?组装台式计算机主机的教程...
  16. mysql安装出现change_mysql-5.msi安装出现change,repaire,or remove installation
  17. 全国三级城市联动 js版
  18. 2019.2以后idea插件库打不开解决办法(亲测可以使用)
  19. springboot启动报Field sysModuleService in demo.snow.manager.SysModuleController required a bean of type
  20. jQuery—弹窗广告

热门文章

  1. matlab2015崩溃,ubuntu16.04上安装matlab 2015b,2016a的故障排除
  2. Proteus8 交流220V电压源的两种设置方法
  3. maven工程配置私库
  4. 一年中最后一个月的最后一天说说_月底月末最后一天说说心情语句 一个月又过了感慨感悟短语...
  5. java oxm_Spring oxm入门实例
  6. Linux类似迅雷的下载利器uGet
  7. 计算机在识字教学中的应用,信息技术在小学语文识字教学中的作用
  8. 正史中完美的周瑜为何遭后世狂贬?
  9. Pr:导出设置之基本视频设置
  10. 牛逼了!19 岁就在南大读博的“00 后”女生:这是我的学习经历...