效果如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <style>

     td,th{

         border: 1px solid gray;

         text-align: center;

     }

     <!-- 表格偶数行换色（奇数行换色把even改成odd）-->

     table tr:nth-child(even){

         background-color:darkseagreen;

     }

 </style>

 <body>

 <script>

     //边框闪烁函数

     function flashit() {

         if(myexample.style.borderColor=="red"){//通过id为myexample调出其边框颜色判断

             myexample.style.borderColor="green";

         }else if(myexample.style.borderColor=="green"){

             myexample.style.borderColor="blue";

         }else {

             myexample.style.borderColor="red"

         }

     }

     setInterval("flashit()",500);//每0.5秒调用一次

     //鼠标经过、移出、点击颜色改变函数

     function changColor(id,flag) {

         if(flag=="over"){

             if(document.getElementById(id).style.backgroundColor!="red")//判断传入此id的标签的背景色是否红色

                 document.getElementById(id).style.backgroundColor="pink";

         } else if(flag=="click") {

             if (document.getElementById(id).style.backgroundColor != "red")

                 document.getElementById(id).style.backgroundColor = "red";

             else

                 document.getElementById(id).style.backgroundColor = "green";

         }else if(flag=="out"){

             if(document.getElementById(id).style.backgroundColor!="red")

                 document.getElementById(id).style.backgroundColor="green";

         }

     }

 </script>

 <table id="myexample" style="border: 2px solid red;width: 500px;" cellspacing="0" cellpadding="0"><!--定义边框样式及消除单元格之间空隙-->

     <tr id="1" style="background-color: #c9bbff" onmouseover="changColor(1,'over')" onmouseout="changColor(1,'out')"onclick="changColor(1,'click')">

         <th>编号</th>

         <th>姓名</th>

         <th>年龄</th></tr>

     <tr id="2" onmouseover="changColor(2,'over')" onmouseout="changColor(2,'out')" onclick="changColor(2,'click')">    <!--当鼠标触发经过、移出、点击事件后调用函数-->

         <td>1</td>

         <td>张三</td>

         <td>22</td></tr>

     <tr id="3" onmouseover="changColor(3,'over')" onmouseout="changColor(3,'out')"onclick="changColor(3,'click')">

         <td>2</td>

         <td>李四</td>

         <td>34</td></tr>

     <tr id="4" onmouseover="changColor(4,'over')" onmouseout="changColor(4,'out')"onclick="changColor(4,'click')">

         <td>3</td>

         <td>王武</td>

         <td>45</td></tr>

     <tr id="5" onmouseover="changColor(5,'over')" onmouseout="changColor(5,'out')"onclick="changColor(5,'click')">

         <td>4</td>

         <td>小二</td>

         <td>22</td></tr>

     <tr id="6" onmouseover="changColor(6,'over')" onmouseout="changColor(6,'out')"onclick="changColor(6,'click')">

         <td>5</td>

         <td>刘六</td>

         <td>32</td></tr>

 </table>

 </body>

 </html>

JS应用实例1：表格各行换色的更多相关文章

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

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

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

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

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

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

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

  7. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

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

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

  9. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

随机推荐

  1. ASP.NET 微信公众平台模板消息推送功能完整开发

    最近公众平台的用户提出了新需求,他们希望当收到新的邮件或者日程的时候,公众平台能主动推送一条提醒给用户.看了看平台提供的接口,似乎只有[模板消息]能尽量满足这一需求,但不得不说微信提供的实例太少,而且 ...

  2. Qt：&OpenCV—Q图像处理基本操作（Code）

    原文链接:http://www.cnblogs.com/emouse/archive/2013/03/31/2991333.html 作者写作一系列:http://www.cnblogs.com/em ...

  3. GROUP BY GROUPING SETS 示例

    --建表 create table TEst1 ( ID ), co_CODE ), T_NAME ), Money INTEGER, P_code ) ); --插入基础数据 insert into ...

  4. webpack学习笔记(3)--webpack.config.js

    module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...

  5. KOA2框架原理解析和实现

    koa是一个基于node实现的一个新的web框架,从头实现一个koa框架,它是由express框架的原班人马打造的.它的特点是优雅.简洁.表达力强.自由度高.它更express相比,它是一个更轻量的n ...

  6. spring 组件注册

    一.声明配置类和注册 bean /** * 配置类 == applicationContext.xml 配置文件 * @author Administrator * */ //@Configurati ...

  7. js cookie 设置

    (function () { function getCookie(name) { var start = document.cookie.indexOf(name + "="); ...

  8. 0113针对大数据量SUM的优化-思路

    转自博客:http://bbs.csdn.net/topics/390426801?page=1 优化思路:无论如何你的结果都是要扫描全有表记录,而在456010记录中,的UserName的分布导致这 ...

  9. ExtJs之Ext.XTemplate:模板成员函数

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  10. BA--关于干节点和湿节点

    干接点与湿接点知识 通俗定义:有干接点就有湿接点,是对于开关量而言的. 湿接点的定义是:有源开关:具有有电和无电的 2 种状态:2 个接点之间有极性,不能反 接: 常见湿接点 1.如果把以上的干接点信 ...