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实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...
随机推荐
- 了解 DML、DDL、DCL
一.DML DML(Data Manipulation Language)数据操纵语言: 最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些操作 S ...
- day0~day13
day0 day1 day2 day4 day5 day7 day9 day10 day12 day13
- go struct 的方法1
方法 Go 没有类.然而,仍然可以在结构体类型上定义方法. 方法接收者 出现在 func 关键字和方法名之间的参数中. package main import ( "fmt" ...
- SVN迁移到Gitlab实践经历
svn 迁移至git操作手册 项目交付.版本管理工具变更等情况下,迁移svn旧历史记录有很大必要,方便后续追踪文件的提交历史,文件修改记录比对等.git自带了从svn迁移至git的工具命令,可很好的对 ...
- hdu 4324
思路待整理 #include<cstdio> #include<iostream> #include<vector> #include<queue> # ...
- Myatis之bind标签
myBatis的bind的标签,一般的用法都是 <if test="name!= null and name!= '' "> <bind name="u ...
- win8系统安装.net Framework3.5
Win8 离线安装 .Net Framework 3.5(工具+方法)(支持Win8.1) 微软在最新的 Win8 / Win8.1 系统中没有集成 .NET 3.5,如果安装的话,必须是在线安装,甚 ...
- Android监听EditText输入字符串,删除指定的字符
alert_ed = (EditText) a.findViewById(R.id.alert_ed_queue_num); alert_ed.addTextChangedListener(mText ...
- 减少打包组件vue.config.js——Webpack的externals的使用
vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...
- DSO missing from command line
最近项目正经历着一次更新,一系列编译工具都进行了大版本的升级,随时而来的是,原本正常编译的代码出现了大量的warning,最终编译失败,其 中一个问题困扰了比较长的时间,虽然fix的方法不难,但是一直 ...