依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题。:)

  代码很简单,利用纯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单双行交替色的更多相关文章

  1. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  2. html table单双行颜色间隔(转载)

    直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  3. js控制表格单双行颜色交替显示

    <script language="JavaScript"> window.onload = function() { var Table=document.getEl ...

  4. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. repeater单双行颜色不同,gridview repeater DataList 鼠标经过改变背景颜色

    1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void  ...

  6. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  7. python 单双引号交替的json串

    单双引号交替的json串 1.常见的json串,类似于这种{"isSucess":true, "name":"yoyo", "st ...

  8. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  9. 奇偶选择器:使用odd和even属性实现表格单双行颜色相间和不同

    一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...

随机推荐

  1. 华为S5700系列交换机配置文件导出、导入

    一.导出 配置用户名密码,使能ftp ftp server enable aaa local-user putty password cipher putty123 local-user putty ...

  2. PAT甲级 图 相关题_C++题解

    图 PAT (Advanced Level) Practice 用到图的存储方式,但没有用到图的算法的题目 目录 1122 Hamiltonian Cycle (25) 1126 Eulerian P ...

  3. 20191011-构建我们公司自己的自动化接口测试框架-testrun最重要的模块

    testrun模块呢就是最终自动化测试入口,调用前面封装的各个模块主要流程是: 1. 获取测试集种待执行的测试用例 2. 处理测试用例获取的数据,包括转换数据格式,处理数据的中的关联等 3. 处理完数 ...

  4. go slice切片注意跟数组的区别

    一个 slice 会指向一个序列的值,并且包含了长度信息. []T 是一个元素类型为 T 的 slice. [2]string 这样定义久是字符数组 []string 这样定义就是切片 表面上看切片就 ...

  5. 『Python基础』第2节: Python简介及入门

    一. Python介绍 Python是一门高级计算机程序设计语言,1989年,荷兰的Guido von Rossum创造了它.Guido是是一个牛人,1982年,他从阿姆斯特丹大学获得了数学和计算机硕 ...

  6. hdu 6377 度度熊看球赛 (dp)

    大意: $n$对情侣, $2n$个座位, 对于一个方案, 若$k$对情侣相邻, 则喧闹值增加$D^k$, 求喧闹值期望. 跟CF 840C一样, 设$dp[i][j]$为$i$个人, 有$j$对情侣相 ...

  7. 正则表达式的运行原理详解(NFA,多分支原理)

    原文:https://blog.csdn.net/yx0628/article/details/82722166

  8. 面试经典算法:快速排序Golang实现

    Golang快速排序 定义 快速排序由C. A. R. Hoare在1962年提出.快速排序是对冒泡排序的一种改进,采用了一种分治的策略. 基本思想 通过一趟排序将要排序的数据分割成独立的两部分,其中 ...

  9. (五)mybatis之一对一关系

    一.需求分析 需求:查询订单信息关联查询用户信息 分析:一条订单只能由一个消费者来下单,也就是说从订单的角度来说与消费者是一对一的关系. 二.建数据库表和实体对象 其中订单表中的字段user_id对应 ...

  10. VS App_Code文件夹下的类文件不能直接被调用的解决方法

    如下图所示,新建的类不能直接使用,会显示报错,检查命名空间什么的,未果 通过百度搜索,发现这么一篇文章:https://blog.csdn.net/younghaiqing/article/detai ...