<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Cities</title>

  <link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" />

  <script type="text/javascript" src="scripts/addLoadEvent.js"></script>

  <script type="text/javascript" src="scripts/stripeTables.js"></script>

  <script type="text/javascript" src="scripts/highlightRows.js"></script>

</head>

<body>

  <table>

    <caption>Itinerary</caption>

    <thead>

    <tr>

      <th>When</th>

      <th>Where</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td>June 9th</td>

      <td>Portland, <abbr title="Oregon">OR</abbr></td>

    </tr>

    <tr>

      <td>June 10th</td>

      <td>Seattle, <abbr title="Washington">WA</abbr></td>

    </tr>

    <tr>

      <td>June 12th</td>

      <td>Sacramento, <abbr title="California">CA</abbr></td>

    </tr>

    </tbody>

  </table>

</body>

</html>

addLoadEvent.js 使得页面载入时候运行JS函数：

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}

不动HTML代码的情况下，stripeTables.js隔行换色：

function stripeTables() {

  if (!document.getElementsByTagName) return false;

  var tables = document.getElementsByTagName("table");

  for (var i=0; i<tables.length; i++) {

    var odd = false;

    var rows = tables[i].getElementsByTagName("tr");

    for (var j=0; j<rows.length; j++) {

      if (odd == true) {

        addClass(rows[j],"odd");

        odd = false;

      } else {

        odd = true;

      }

    }

  }

}

function addClass(element,value) {

  if (!element.className) {

    element.className = value;

  } else {

    newClassName = element.className;

    newClassName+= " ";

    newClassName+= value;

    element.className = newClassName;

  }

}

addLoadEvent(stripeTables);

highlightRows.js 鼠标经过有动态感：

function highlightRows() {

  if(!document.getElementsByTagName) return false;

  var rows = document.getElementsByTagName("tr");

  for (var i=0; i<rows.length; i++) {

    rows[i].onmouseover = function() {

      this.style.fontWeight = "bold";

    }

    rows[i].onmouseout = function() {

      this.style.fontWeight = "normal";

    }

  }

}

addLoadEvent(highlightRows);

JS给TR隔行换色，鼠标经过有动感的更多相关文章

  1. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  2. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  3. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  4. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  5. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  8. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  9. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

随机推荐

  1. scut客户端心跳超时和客户端断开测试

    1.断开的消息触发后,依然会触发超时 2.触发超时不会触发断开 3.超时会触发多次,断开只触发一次 超时不是很准确,好像有时候不会触发.如果要判断玩家是否下线,可以用最后一次心跳时间判断

  2. FPGA大公司面试笔试数电部分，看看你会多少

    1:什么是同步逻辑和异步逻辑?(汉王) 同步逻辑是时钟之间有固定的因果关系.异步逻辑是各时钟之间没有固定的因果关系. 答案应该与上面问题一致 [补充]:同步时序逻辑电路的特点:各触发器的时钟端全部连接 ...

  3. 众数问题（山东理工OJ）

    题目描写叙述 给定含有n个元素的多重集合S,每一个元素在S中出现的次数称为该元素的重数.多重集S中重数最大的元素称为众数. 比如,S={1,2,2,2,3.5}.多重集S的众数是2,其重数为3. 对于 ...

  4. 并发insert情况下会发生重复的数据插入问题

    1.背景 用多线程接收推送的订单数据,把接收的订单数据存到一个表中,实现的需求是:如果接收的订单消息在数据库中已经存在,那么执行update操作:如果没有存在,那么执行insert操作代码逻辑: if ...

  5. iOS开发多线程篇 08 —GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  6. 0054 Spring MVC的@Controller和@RequestMapping注解

    @Controller注解 该注解用来指示一个类是一个控制器,在Spring的配置xml文件中开启注解扫描 <context:conponent-scan base-package=" ...

  7. Linux中如何设置服务自启动？

    转自:Linux中如何设置服务自启动? 有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务,主要用三种方式进行这一操作: ln -s             在/etc/rc.d/rc ...

  8. Struts1小案例问题教训总结（含中文乱码问题及解决）

    1. 提交form后页面空白,没有任何显示,Debug发现form的validate()以及action的execute()根本没有被调用. 原因:validate()和execute()有2个互为o ...

  9. windows7常用操作命令

    1.打开命令行 按住Windows键加R键,打开运行窗口 2.打开笔记本 运行窗口中输入:notepad,点击确定或回车,打开记事本工具 主要作用:浏览网页时,看到一些有用的话,那么你是怎么把它记录下 ...

  10. 浅谈Java中的补零扩展和补符号位扩展

    今天,魏屌出了一道题,题目如下: 定义一个大头序的byte[]a={-1,-2,-3,-4},转换成short[]b.问b[0]和b[1]分别是多少? 乍一看,这题不难,无非就是移位操作,再进行组合. ...