第一种：鼠标经过时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 下的常用操作命令

    一,Linux的介绍 略. 二,文件类的常用命令 三,权限类的常用命令

  2. Notes on Noise Contrastive Estimation and Negative Sampling

    Notes on Noise Contrastive Estimation and Negative Sampling ## 生成负样本 在常见的关系抽取应用中,我们经常需要生成负样本来训练一个好的系 ...

  3. 3.linux基本操作命令

    2018年2月20日星期二 Linux常见操作命令 Linux 操作命令? ●查看进程是否启用? ps -aux|less ●查看磁盘剩余空间? cat /proc/meminfo 校验内存使用 ●s ...

  4. 42.纯 CSS 创作一个均衡器 loader 动画

    原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...

  5. Yii框架中使用SRBAC作为权限管理模块时遇到的问题

    Yii框架中使用SRBAC作为权限管理模块时遇到的问题   看到Yii中提供RBAC的插件,SRBAC,就想用用. 结果按照手册上的安装办法,整来整去,安装完了,可就是进不了权限管理界面. 最后想到, ...

  6. yii主题

    修改应用的配置文件(protected/config/main.php)中加入 return array( ’theme’=>’basic’, ); 所有的视图文件必须位于views下 ,布局视 ...

  7. mybatis一（常用配置信息和获取插入后id）

    <!--配置文件--><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE conf ...

  8. MFC 如何在一个类中使用在其他类中定义的变量或函数

    [声明:本文的知识点来源于网络,参考网址:https://blog.csdn.net/bill_ming/article/details/7407848] [以下三种方法亲测有效,可以根据具体情况来选 ...

  9. vbox 按照增强工具 centos7

    命令:mount -t auto /dev/cdrom /mnt/cdrom 这命令就是把CentOS CDROM挂载在/mnt/cdrom目录中,这样我们就可以访问光盘里面的内容了.执行“mount ...

  10. js 只允许输入数字

    <input id="credit" type="text" class="nummber" onkeyup="value= ...