效果如下：

 <!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. 使用postman模拟登录请求

    Cookie 可以写在Headers里面

  2. SpringMVC（三）@PathVariable

    使用@PathVariable可以快速的访问,URL中的部分内容. ①. 在@RequestMapping的value中使用URI template({变量名}),然后在@RequestMapping ...

  3. SciSharpCube：容器中的SciSharp，.NET机器学习开箱即用

    SciSharp Cube 在Docker容器中快速体验SciSharp机器学习工具的最新功能. 项目地址:https://github.com/SciSharp/SciSharpCube 从Dock ...

  4. php进程控制

    1 POSIX扩展    posix_access($file,$mode)  查看文件的访问权限,可以由is_readable等几个函数代替    posix_errno()  返回posix函数执 ...

  5. bootstrapvalidator使用，重置校验

    1.html页面需要注意的是验证字段需要用form-group包裹.需要引用相应的css和js. <form id="jobForm" role="form&quo ...

  6. 实验二：1、输出“Hello Word！”；2、测试主方法 的输入参数。3、总结

    一.输出:“Hello Word!” 1.新建java项目:点击File->New->Java Project.在project name一栏中输入自己所要创建的项目名称,点击Finish ...

  7. Virtual servers on a Raspberry Pi with the light weight OS virtualization system Docker!

    转自:http://www.hyggeit.dk/2014/02/virtual-servers-on-raspberry-pi-with.html Virtual servers on a Rasp ...

  8. Linux进程间通信--进程，信号，管道，消息队列，信号量，共享内存

    Linux进程间通信--进程,信号,管道,消息队列,信号量,共享内存 参考:<linux编程从入门到精通>,<Linux C程序设计大全>,<unix环境高级编程> ...

  9. 《黑白团团队》第八次团队作业：Alpha冲刺 第一天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. [Alpha] Scrum meetin ...

  10. C++ decltype类型说明符

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50865552 1 基本语法 declt ...