效果如下：

 <!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. BOW模型在ANN框架下的解释

    原文链接:http://blog.csdn.net/jwh_bupt/article/details/17540561 作者的视野好,赞一个. 哥德尔第一完备性定理,始终是没有能看完完整的证明,艹!看 ...

  2. XML文件操作之dom4j

    能够操作xml的api还是挺多的,DOM也是可以的,不过在此记录下dom4j的使用,感觉确实挺方便的 所需jar包官网地址:http://www.dom4j.org/dom4j-1.6.1/ dom4 ...

  3. 【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案

    主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个. 下面是我 ...

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

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

  5. ES6标准入门（第三版）学习笔记(1)

    ES6声明变量的六种方法 ES5只有两种 var,function命令 ES6新增了let,const,class,import命令 验证var与let用法上的不同 var a = []; for ( ...

  6. css3 3d　　魔方

    <style><!--@charset "UTF-8"; * { margin: 0; padding: 0 } html,body{ width: 100%; ...

  7. 训练1-A

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入中含有一些数据,分别是成对出现的花布条和 ...

  8. MySQL数据库唯一性设置(unique index)

    1,命令行操作 分为两种.一种是在建表时就想好要加上唯一性,另一种是在后期才发现需要设置唯一性. 建表时: CREATE TABLE `t_user` ( `Id` int(11) NOT NULL ...

  9. BeanPostProcessor bean 的后置处理器

    一. 自定 bean 的后置处理器 MyBeanPostProcessor 类.当你在初始化容器中的 bean 之前和之后,都会调用该处理器中的方法 @Component //将该后后置处理器加入到容 ...

  10. mybatis逆向工程不生成Example

    mybatis逆向生成映射文件时会生成一大堆example文件,没感觉有啥用,可以手动删除这些多余的东西,使项目变得好看许多 也可以通过配置达到目的: 原配置: <table tableName ...