Js实现table单双行交替色
依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题。:)
代码很简单,利用纯Js实现表格单双行交替色。
//Js实现表格单双行交替色
function SetTrColor(tableId) {
var table = document.getElementById(tableId);//根据table的 id 属性值获得对象
var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
for (var i = 0; i < rows.length; i++) {
if (i % 2 == 0) {
rows[i].style.backgroundColor = "#D9F5D4";//偶数行时背景色为#D9F5D4
}
else {
rows[i].style.backgroundColor = "White";//单数行时背景色为white
}
}
}
在页面加载完之后传入对应表格元素的Id调用即可。
<script type="text/javascript">
window.onload = function trColor() {//窗口加载时调用
SetTrColor("tableId");
}
</script>
Js实现table单双行交替色的更多相关文章
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
- html table单双行颜色间隔(转载)
直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- js控制表格单双行颜色交替显示
<script language="JavaScript"> window.onload = function() { var Table=document.getEl ...
- table 控制单双行颜色以及鼠标hover颜色 table光棒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- repeater单双行颜色不同,gridview repeater DataList 鼠标经过改变背景颜色
1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void ...
- js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
- python 单双引号交替的json串
单双引号交替的json串 1.常见的json串,类似于这种{"isSucess":true, "name":"yoyo", "st ...
- 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数
一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...
- 奇偶选择器:使用odd和even属性实现表格单双行颜色相间和不同
一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...
随机推荐
- go 相关资源
网站guide 官方文档 国内镜像 包下载 Golang标准库文档 Release History Getting Start 安装 1.下载binrary包(zip 解压后需要配置gopath, m ...
- windows和linux环境下使用google的glog日志库
一.概述 glog是google推出的一款轻量级c++开源日志框架,源码在github上,目前最新release版本是v0.3.5. githut地址:https://github.com/googl ...
- GoF 的 23 种设计模式的分类和功能
1. 根据目的来分 根据模式是用来完成什么工作来划分,这种方式可分为创建型模式.结构型模式和行为型模式 3 种. 创建型模式:用于描述“怎样创建对象”,它的主要特点是“将对象的创建与使用分离”.GoF ...
- SAS学习笔记5 字符截取语句(index、compress、substr、scan函数)
index:返回一个字符串中,某个特定字符或字符串的位置,找不到时返回0 compress:从一个字符串移除特定的字符 substr函数 字符替换与提取字符 substr(s, p, n)从变量s的第 ...
- HTML 禁止复制文字
因为本人平时喜欢看网络小说,但是喜欢看的文通过正经网站或者app都需要收费,让人很是不爽,所以...总之,百度网盘上资源很多.但是问题来了,这些资源肯定不会是作者自己流出的,也不应该是网站或app流出 ...
- 数据库及MySQL基础(1)
1.数据库概述 关系型数据库:面对关系,Java面向对象. ·常见数据库 Oracle(神喻):甲骨文 DB2:IBM SQL Server:微软 Sybase:赛尔斯 MySQL:甲骨文,最早是开源 ...
- ASP.NET Core本身已经集成了一个轻量级的IOC容器
1.services.AddTransient<IApplicationService,ApplicationService>//服务在每次请求时被创建,它最好被用于轻量级无状态服务(如我 ...
- C# Winform 设置窗口打开的特效
https://www.cnblogs.com/mq0036/p/6421946.html using System.Runtime.InteropServices; public class Win ...
- centos安装mysql(for 小白)
安装前提: 安装号centos.SecureCRT 安装准备: centos自带数据库Mariadb,先将其移除 下载mysql: 镜像网址:http://mirrors.sohu.com/mysql ...
- Oracle学习笔记:update的字段中包括单引号
平时update的时候直接更改字段内的值,例如: update table_temp set name = 'Hider' where id = 100; 但更新后的值中包括单引号,则不能按以上方式进 ...