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

  代码很简单,利用纯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. if语句、while和for循环

    一.if语句 1.多路分支 if 条件1: 代码块1 elif 条件2: 代码块2 else: 代码块3 #python会执行第一次测试为真的语句,如果所有测试都为假,就执行else部分(本例) 2. ...

  2. PAT(B)1015 德才论(C)

    题目链接:1015 德才论 (25 point(s)) 分析 由题意可知,需要将考生按照分数进行一个分类(级),然后在每一级中按照分数排序.输入的时候将每个人的总分,等级和录取人数先算出来.然后按照自 ...

  3. 1231: 删除字符串中指定的字符(Java)

    WUSTOJ 1231: 删除字符串中指定的字符 题目 原题链接 Description 明天就要英语考试了,小明明正在挑灯夜战背单词.小明明发现单词很难背,背一个忘一个.经过仔细研究,小明明发现单词 ...

  4. AttnGAN: Fine-Grained Text to Image Generation with Attentional Generative Adversarial Networks 笔记

    AttnGAN: Fine-Grained Text to Image Generation with Attentional Generative Adversarial Networks 笔记 这 ...

  5. params关键字应用

    params 是C#中的可变参数, params主要的用处是在给函数传参数的时候用,就是当函数的参数不固定的时候.  关于参数数组,需掌握以下几点. (1)在方法声明中的 params 关键字之后不允 ...

  6. Java 实现简单的 RPC 框架

    RPC 简介 RPC,全称为 Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式,而不需要了解底层网络技术 ...

  7. JDBC 学习复习8 C3P0数据源使用

    C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Spring等. c3p0与dbcp区别 dbcp ...

  8. OSI的七层网络模型

    一.概念七层模型,亦称OSI(Open System Interconnection)参考模型,是参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系.它是一个七层的.抽象 ...

  9. java调用.net的webservice接口

    要调用webservice,首先得有接口,用已经写好的接口地址在myEclipse的目标project中,右键->new web service client-> 选择JAX-WS方式,点 ...

  10. 为什么加了jquery mobile 会有 Loading 字样在页面底部?【已解决】

    这是一个奇怪的问题,用了jquery mobile js库,页面底部就会出现Loading字样, 解决办法如下: 1,正常加上css样式 2,一定要在jquery mobile js库加载之前,设置 ...