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

  代码很简单,利用纯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. 小程序使用mpvue框架无缝接入Vant Weapp组件库

    有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式,然而由于mpvue是对微信原生开发的再次封装,这也为我们引入UI组件添加了不少麻 ...

  2. (七)Session 对象知识点总结(来自那些年的笔记)

    如果你想要转载话,可不可以不要删掉下面的 作者信息 呀!: 作者:淮左白衣 写于 来源笔者自己之前学javaWeb的时候,写的笔记 : 目录 Session对象 Session和cookie的主要区别 ...

  3. C/C+面试题一:找出字符串中出现最多的字符和次数,时间复杂度小于O(n^2)

    已知字符串"aabbbcddddeeffffghijklmnopqrst"编程找出出现最多的字符和次数,要求时间复杂度小于O(n^2) /********************* ...

  4. destoon 增删改查

    switch($action) { case 'add': //添加页面 if($submit) { // 不允许重名,直接添加时 $old = $db->get_one("SELEC ...

  5. 少儿编程 | 02.Scratch编程环境

    上次课程介绍了Scratch的基本概念和一些特点,最后还给出了一些有趣的例子.本次课程介绍Scratch的两种编程环境以及在Scratch官网注册个人账号的步骤. Scratch 3.0的两种编程环境 ...

  6. 【Scratch】它跟Mindstorms,有什么区别?

    第197篇文章 老丁的课程 在正式开始这套课程之前,依照老丁的习惯,还是要给大家白话下东西,该怎么学? 本节课,来讲讲我对于学习这个软件(包括和EV3配合起来)的一些看法.同时,也给小朋友们一些编程学 ...

  7. Django——关于项目开发遇到的一些小技巧

    目录 头像图片 js获取网站信息 js获取前端信息 Dj获取刚写入的数据的信息 js跳转新链接 头像图片对象的显示 在做到根据登陆ID决定用户头像的时候,加载静态文件的{% static ‘xxxxx ...

  8. CTS & APIO 2019 游记

    写在前面 算是省选后的第一轮大考. 去年因为某些原因并没有参加 CTSC 以及 APIO,还是有些遗憾,所以希望今年能有所收获. 也希望今年的 CTS 能延续去年的出题风格,这样我还能苟一两个题. 然 ...

  9. Nginx与负载均衡

    Nginx,首先是一款轻量级的Web服务器,其特点是占有内存少,并发能力强,大厂用户有:百度.新浪.网易.腾讯等.其次,它是一款反向代理服务器:第三,它还是一款电子邮件(IMAP/POP3)代理服务器 ...

  10. 初学java1 数据类型

    java数据类型 分为8种 整型 byte 8位 short 16位 int 32位 long 64位 字符型 char 必需为单引号'' 且只能有一个字符 浮点型 float double 布尔类型 ...