第一种：鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             function changeOver(elementId){

                 //声明指定相关表元素

                 var table1 = document.getElementById("table1").children[0];

                 //for循环语句

                 for(var i=0;i<table1.children.length;i++){

                     //if判断语句

                     if(table1.children[i]==elementId){

                     //奇数行

                     if(i%2==1)

                         //当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色

                         elementId.style.background="red";

                     //偶数行

                     else

                         //当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色

                         elementId.style.background="green";

                     }

                 }

             }

                 //当鼠标离开相关单元格时所触发的事件

             function changeOut(elementId){

                 //当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色

                 elementId.style.background="#FFFFFF";

             }

         </script>

         <style type="text/css">

             /*表格的样式*/

             table{

                 width: 200px;

                 height: 400px;

                 border: 1px solid;

             }

             tr td{

                 width: 100px;

                 height: 50px;

                 border: 1px solid;

             }

         </style>

     </head>

     <body>

         <!--onmouseover鼠标经过时触发的函数，onmouseout鼠标离开时触发的函数-->

         <table id="table1" >

             <tr  onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td >1</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>2</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>3</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>4</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>5</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>6</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>7</td>

             </tr>

             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">

                 <td>8</td>

             </tr>

         </table>

     </body>

 </html>

第二种：直接用css发生改变，使用了伪类选择器nth-child

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*奇数改变的颜色*/

            tr:nth-child(odd){background-color:#FFE4C4;}

            /*偶数改变的颜色*/

            tr:nth-child(even){background-color:#F0F0F0;}

            /*table样式*/

            table{

                width: 200px;

                height: 400px;

                border: 1px solid;

            }

            /*tr.td的样式*/

            tr td{

                width: 100px;

                height: 50px;

                border: 1px solid;

            }

        </style>

    </head>

    <body>

        <!--设计的一个简单表格-->

        <table id="table1" >

            <tr>

                <td >1</td>

            </tr>

            <tr>

                <td>2</td>

            </tr>

            <tr>

                <td>3</td>

            </tr>

            <tr>

                <td>4</td>

            </tr>

            <tr>

                <td>5</td>

            </tr>

            <tr >

                <td>6</td>

            </tr>

            <tr >

                <td>7</td>

            </tr>

            <tr>

                <td>8</td>

            </tr>

        </table>

    </body>

</html>

设计table表格，用js设计偶数行和奇数行显示不同的颜色的更多相关文章

  1. EXCEL 偶数、奇数行分开求和公式

    例举 : A1行是 123 A2行是 321 A3行是 456 A4行是 789我是加的是A1+A3得出的和还有加的是A2+A4得出的和因为要A1+A3一直加到A601,我用很笨的方式像这样子一个个加 ...

  2. 【shell脚本】显示文件的偶数或奇数行

    # Dispaly the odd line. awk 'NR%2==1' file

  3. jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式

    query 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou");   //为奇数行设 ...

  4. Table表格的一些操作

    首先创建一个table表格: <input type="button" id="btn1" value="获取数据" /> &l ...

  5. linux命令（39）：shell 打印偶数行，奇数行 ,行号

    awk 命令: 1. 打印行号和内容: awk '{print NR":"$0}' 2. 输出:偶数行和奇数行到文件 awk '{print $0.txt > NR%2.tx ...

  6. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

随机推荐

  1. linux 下的ssh免密登陆设置

    一,原理 说明: A为linux服务器a B为linux服务器b 每台linux都有ssh的服务端和客户端,linux下的ssh命令就是一个客户端 我们常用ssh协议来进行登陆或者是文件的拷贝,都需要 ...

  2. 接口详解例子代码（附Java1.8的接口新特性）

    接口,与抽象类类似但是区别也很大,他们都是标签,用来提醒父类一定要实现的类里创建抽象方法.而接口类可以implements 多个接口,抽象类则只能父类只能继承一个抽象类,与抽象不同的是它不是继承组合关 ...

  3. Eureka 客户端启动报错误 Cannot determine embedded database driver class for database type NONE

    用这种数据库配置就是死活连不上数据库 提示:Cannot determine embedded database driver class for database type NONE 解决方式: 启 ...

  4. uva-10887-枚举

    题意:集合S1和S2,把S2中的元素拼接到S1的后面去,生成新的元素,问有多少个不重复的元素 直接map.注意,不能用cin读取字符串,题目没有保证字符串中间没有空格 #include "p ...

  5. 白鹭引擎 - 文本类型 ( TextField, )

    1, 普通文本 class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEv ...

  6. tensorflow实战系列（三）一个完整的例子

    #!/usr/bin/env python2# -*- coding: utf-8 -*-"""Created on Wed Jan 18 08:42:55 2017 @ ...

  7. vue下载和上传excle数据文件，解析excel文件数据并存在数据库中

    下载: VUE: window.open("xxxx/downloadOldTaskDataFile.do_", "_blank"); JAVA: /** * ...

  8. linux 源码编译php的参数

    ./configure --prefix=/usr/local/php-5.3.5 --with-config-file-path=/usr/local/php-5.3.5/etc --with-co ...

  9. Servlet3模块化应用中，@Controller没有被注入，导致出现：No mapping found for HTTP request with URI [/xxx/xxx] in DispatcherServlet with name 'springmvc'

    问题描述:Servlet3模块化应用中,@Controller没有被注入,导致出现: org.springframework.web.servlet.DispatcherServlet noHandl ...

  10. HBASE小结--待续使用

    构建在HDFS之上的分布式,面向列的存储系统,使用zookeeper做协同服务,在需要实时读写和随机访问超大规模数据集的时候使用 缺点:非关系型,不支持SQL,数据类型单一(字符串,无类型),之支持单 ...