效果如下：

 <!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. matlab中的@函数

    原文链接:http://blog.sina.com.cn/s/blog_5e73a8fc0100t9yg.html 这是个函数句柄 @(x,y) 表示未知数是x和y punct     - Funct ...

  2. UVa 1583 Digit Generator WA

    #include<stdio.h> int main() { long int n,i,s=0; while(scanf("%d",&n)!=EOF) { in ...

  3. <轉>APUE:mmap函数

    起初 看过一遍内存映射I/O,意思大概是懂了,就是直接操作文件再而直接通过缓冲区来操作,减少一些read.write调用所花费的时间.加上文中给出一个copy的例子,意思也好理解的.不过困扰的来了,我 ...

  4. eclipse创建maven的ssm项目

    自己接触ssm框架有一段时间了,从最早的接触新版ITOO项目的(SSM/H+Dobbu zk),再到自己近期来学习到的<淘淘商城>一个ssm框架的电商项目.用过,但是还真的没有自己搭建过, ...

  5. SpringMVC源码阅读

    在研究SpringMVC工作流程的同时记录下过程,以便以后浏览. 版本号:5.0.4 前沿:我们在使用SpringMVC的时候会在web.xml中配置以下servlet <!-- 配置sprin ...

  6. 面试题1-----SVM和LR的异同

    1.异(加下划线是工程上的不同) (1)两者损失函数不一样 (2)LR无约束.SVM有约束 (3)SVM仅考虑支持向量. (4)LR的可解释性更强,SVM先投影到更高维分类再投影到低维空间. (5)S ...

  7. Blender软件导出的obj数据格式文件内容解读

    [cube.obj] # Blender v2.78 (sub 0) OBJ File: '' # www.blender.org mtllib cube.mtl #这里是引用了一个外部材质文件cub ...

  8. 洛谷P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…

    题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带走 ...

  9. django rest-farme-work 的使用(3)

    请求和响应 Requests and Responses 从这一片来说,我们将真正开始覆盖REST框架的核心.我们来介绍一些基本的构建块 Request objects REST框架引入了一个Requ ...

  10. 【python正则】工作中常用的python正则代码

    工作中常用的一些正则代码: 01.用户名正则 import re # 4到16位(字母,数字,下划线,减号)if re.match(r'^[a-zA-Z0-9_-]{4,16}$', "ab ...