html 偶数项 替换,JS通过奇数项和偶数项实现两种背景颜色的表格实现代码
原理其实很简单:利用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通过奇数项和偶数项实现两种背景颜色的表格实现代码相关推荐
- [js] axios为什么可以使用对象和函数两种方式调用?是如何实现的?
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码 初始化 看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
- 利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
- oracle 判断是否位汉字,js判断字符是否是汉字的两种方法小结
有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 1.用正则表达式判断 js判断字符是否是汉字 .co ...
- php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
- 使用ArcGIS JS API加载WMTS图层的两种方式
文章目录 前言 方式一 方式二 前言 某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
- node.js 获取异步方法里面的数据 =》 两种方式
第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...
- js分页页码显示逻辑实现的两种方法
第一种:之前在项目中用到的比较笨重的方式,纯代码的形式实现,用到<c:if>判断,有需要的朋友可作参考,自定义样式就可以实现想要的分页效果. page.pageNo = 当前页数 page ...
- JS字符串中的第一个字母大写(两种方法)
如何将字符串中的第一个字母大写 一个非常常见的操作是将字符串的第一个字母大写.虽然许多编程语言都有一种本地方法来实现这一点,但 JS 需要做一些工作. <!DOCTYPE HTML> &l ...
- html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...
最新文章
- 让你二十年后仍是人才
- 从今天要开始复习和提升linux了, 为期 2月, 加油
- a bytes-like object is required, not 'str' pickle.loads pickle.dumps
- JavaScript的5种调用函数的方法
- Package name must have at least two identifiers 解决办法
- 一个方法多个return_用这个方法可以快速、准确地记住一个单词的多个词义
- Java构造字符串算法题_LeetCode算法题-Repeated Substring Pattern(Java实现)
- excel去除html格式化,带有标签的HTML文本,用于在Excel单元格中格式化文本
- QT每日一练day3:Qt的编译机制
- Unity3d:Unknown type 'System.Collections.Generic.CollectionDebuggerView'1
- 转hdmi_LT8619CHDMI转LVDS-HDMI支持高达4Kx2K_30Hz的分辨率
- 易语言取linux命令返回值,易语言返回命令使用讲解
- CAM是利用计算机,利用DroidCam将手机摄像头打造成计算机摄像头
- Java工程师成神之路(2018修订版)
- 台式计算机 如何组装,如何自行组装台式计算机?组装台式计算机主机的教程...
- mysql安装出现change_mysql-5.msi安装出现change,repaire,or remove installation
- 全国三级城市联动 js版
- 2019.2以后idea插件库打不开解决办法(亲测可以使用)
- springboot启动报Field sysModuleService in demo.snow.manager.SysModuleController required a bean of type
- jQuery—弹窗广告
热门文章
- matlab2015崩溃,ubuntu16.04上安装matlab 2015b,2016a的故障排除
- Proteus8 交流220V电压源的两种设置方法
- maven工程配置私库
- 一年中最后一个月的最后一天说说_月底月末最后一天说说心情语句 一个月又过了感慨感悟短语...
- java oxm_Spring oxm入门实例
- Linux类似迅雷的下载利器uGet
- 计算机在识字教学中的应用,信息技术在小学语文识字教学中的作用
- 正史中完美的周瑜为何遭后世狂贬?
- Pr:导出设置之基本视频设置
- 牛逼了!19 岁就在南大读博的“00 后”女生:这是我的学习经历...