效果如下：

 <!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. ML一些简单的资源

    参考文献及推荐阅读 维基百科,http://en.wikipedia.org/wiki/K-nearest_neighbor_algorithm: 机器学习中的相似性度量,http://www.cnb ...

  2. jQuery访问json文件（一个例子）

    保存网址 打开时 点开一个类型 当点开一个类型,其他类型隐藏 回到所有类型 没有错,左下角有个这是什么样子的图标 做到了什么: 1.从json文件中取得网址,并根据访问次数排列,放到前面: 2.就是1 ...

  3. /usr/bin/ld: cannot find -lxxx 问题 解决方法总结

    最近在做毕设的收尾工作,很多程序都要部署到linux下来运行,遇到了挺多问题,昨天就集中性遇到了 在编译应用时,遇到了 /usr/bin/ld: cannot find -lxxx 这种情况是系统找不 ...

  4. java真实面试题(2)

    1,递归算法的实行过程,一般来说,可以分为()和()两个阶段,若一个问题的求解既可以用递归也可以用递推时,则往往用(),因为().贪婪法是一种()的算法. 答:递归算法分为递推和回归两个阶段,递推效率 ...

  5. VMware WorkStation 用 VMTools 官方下载地址

    每次安装 VMTools 都不成功,谷歌到了这个地址,特地分享. 先打开这个网址, 选择你的 VMware WorkStation 对应的版本号: http://softwareupdate.vmwa ...

  6. Matrix(坑)

    https://github.com/florent37/Android-3D-Layout

  7. MySQL 单表查询多表查询

    一 单表查询 表准备 create table emp( id int not null unique auto_increment, name varchar(20) not null, sex e ...

  8. Project Euler 31 1000-digit Fibonacci number（ DP ）

    题意:在无限硬币的情况下能组成200的方案数有多少个 思路:DP,设数组 dp[ n ] [ k ] 代表前 n 种硬币能够组成 k 元的方案数,那么就能得到 dp [ n ] [ k ] = dp ...

  9. Codeforces 787B Not Afraid（ 水 ）

    链接:传送门 题意:判断 m 组数,如果某一组中出现负数就判断这一组中是否存在与之相反的数,如果每一组中都满足要求则输出 "NO" 反之输出 "YES" 思路: ...

  10. LVM man帮助

    > man lvm LVM(8) System Manager's Manual LVM(8) NAME lvm — LVM2 tools SYNOPSIS lvm [command|file] ...