第一种：鼠标经过时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. Java 文件类 File

    1.File 类 1.File 类 1.1.构造方法 文件的 抽象路径名(操作系统无关) 构造方法 格式 说明 File(String filename) 把文件路径名字符串转换为“抽象路径名”,用来 ...

  2. SQL Server 合并行

    select a.*,b.Organization_Name,c.User_Name sgry,c.renNum,d.User_Name fzr,e.pic_url from dbo.TB_ZYM_L ...

  3. Java-左移右移-jdk8

    移位有三种 << 左移,左边补0 >> 右移,正数左边补0,负数补1 >>> 右移, 正数,负数统一左边补0 来看几个奇葩的代码 public static ...

  4. koltin语言学习(一)——什么是koltin

    转自:Koltin China (一) 介绍 #Kotlin-for-Android-Dev 1. 什么是Kotlin? Kotlin是JetBrains开发的基于JVM的语言.Kotlin是使用Ja ...

  5. hadoop集群namenode同时挂datanode

    背景:(测试环境)只有两台机器一台namenode一台namenode,但集群只有一个结点感觉不出来效果,在namenode上挂一个datanode就有两个节点,弊端见最后 操作非常简单(添加独立节点 ...

  6. mobile-net v2 学习记录。我是菜鸡！

    声明:只是自己写博客总结下,不保证正确性,我的理解很可能是错的.. 首先,mobile net V1的主要特点是: 1.深度可分离卷积.用depth-wise convolution来分层过滤特征,再 ...

  7. TCP 协议相关

    TCP特点: 提供可靠的,保证数据能够准确的到达目的地,如果不能,需要检测发现并重传 流量可控,管理发送数据的频率,不超过设备的承载能力 滑动窗口:https://blog.csdn.net/wdsc ...

  8. python流程控制while和if

    流程控制 1.流程控制if if的4种语法 语法1:   #结构形式 #if条件: # 代码1 # 代码2 # 代码3 # ... key_bak=123 key=int(input('key:')) ...

  9. U盘无法访问

    U盘无法访问 方法/步骤   首先,Win+R,打开“运行”窗口.   在打开的运行窗口中,输入cmd回车     这时会打开这样的一个窗口   这时输入chkdsk g: /f 需要说明的是,g这个 ...

  10. Mastering Creativity:A brief guide on how to overcome creative blocks

    MASTERING CREATIVITY, 1st EditionThis guide is free and you are welcome to share it withothers.From ...