第一种：鼠标经过时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. c++ 接口类

    什么是接口类?2017-06-07 接口类就是只提供接口不提供实现的类,就是接口类,接口类和抽象类对C++而言,没有什么区别. 接口类有如下特点: 子类来实现接口类中没有实现的所有接口. 接口方法前面 ...

  2. LeetCode 7 Reverse Integer & int

    Reverse Integer 想用余10直接算,没想到 -123%10 是 7, 原因 -123-(-123//10*10) r=a-n*[a/n] 以上,r是余数,a是被除数,n是除数. 唯一不同 ...

  3. ROS进阶学习手记 7 -- RViz仿真实例1

    [任务2]:     用simulator: RViz 工具,完成对小车的建模,名字drive RViz = dvrv, 用 dvrv_node 发布topic和数据格式,向它发送位置指令,使它能接受 ...

  4. 温故而知新-robots.txt语法教程

    用几个最常见的情况,直接举例说明:   1. 允许所有SE收录本站:robots.txt为空就可以,什么都不要写.   2. 禁止所有SE收录网站的某些目录: User-agent: * Disall ...

  5. 25.安装配置phantomjs

    1.官网下载windows版本:http://phantomjs.org/download.html2.下载完解压,将PhantomJS可执行文件配置到环境变量里.比如: 将 E:\Soft\soft ...

  6. nodeJs 资料

    http://blog.csdn.net/binyao02123202/article/details/18811207 非常详细 http://www.runoob.com/nodejs/nodej ...

  7. 3. java.lang.UnsupportedClassVersionError: javax/annotation/ManagedBean : Unsupported major.minor version 51.0

    问题描述:

  8. 02.设计模式_NullObject模式

    使用NULL OBJECT模式,我们可以确保返回的总是有效的对象,即使失败时也代表对象什么也不做. 下面以一个数据库查询的示例来演示空对象模式. 1.Employe实体对象空对象的接口 Employe ...

  9. visio交叉线不凸起

    使用visio作图时,经常会遇到交叉线在相交时会形成一个弯曲弓形,这有时十分影响视图效果.可以采用下面的方法消除弓形. 1.visio2003:只需要选中该交叉线,选择“格式”->“行为”,在打 ...

  10. 使用PHP的反射Reflection获取对象信息

    PHP5添加了一项新的功能:Reflection.这个功能使得程序员可以reverse-engineer class, interface,function,method and extension. ...