第一种：鼠标经过时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. 20165205 2017-2018-2《Java程序设计》结对编程一 第一周总结

    20165205 2017-2018-2<Java程序设计>结对编程一 第一周总结 需求分析 对输入的算式进行计算,要求满足一下条件: 支持整数运算,如2+5,47+7865. 支持多运算 ...

  2. system.data oracleClient 需要Oracle客户端8.1.7或high

  3. excel导入导出的两种方式：csv和XLS

    依赖 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifactId>jxl ...

  4. 【Flex】自定义组件学习

    文件列表 主文件: index.mxml 自定义组件  components.mylogo.mxml 图img  a.jpg 2 mylogo.mxml <s:Group xmlns:fx=&q ...

  5. 转载：python 的包导入

    python 包 多个关系密切的模块应该组织成一个包,以便于维护和使用.这项技术能有效避免名字空间冲突.创建一个名字为包名字的文件夹并在该文件夹下创建一个__init__.py 文件就定义了一个包.你 ...

  6. linux获取线程ID

    pthread_self()获取当选线程的ID.这个ID与pthread_create的第一个参数返回的相同.但是与ps命令看到的不同,因此只能用于程序内部,用于对线程进行操作. #include & ...

  7. Windows环境安装Django步骤

    前提:已经安装Python 1.先从Django官网下载压缩包:https://www.djangoproject.com/download/ 2.解压Django,如我解压到 D:\Python\D ...

  8. 【平台兼容性】jeecg3.7 兼容weblogic 部署改造方案

    MyEclipse 配置 WebLogic 10.3.3请参考: https://my.oschina.net/aini3884/blog/895689 常见问题: 1. problem: cvc-e ...

  9. C++11并发之std::thread<转>

    最近技术上没什么大的收获,也是悲催的路过~ 搞一点新东西压压惊吧! C++11并发之std::thread 知识链接: C++11 并发之std::mutex C++11 并发之std::atomic ...

  10. C++11之for循环的新用法《转》

    相关资料:https://legacy.gitbook.com/book/changkun/cpp1x-tutorial/details C++11之for循环的新用法 C++使用如下方法遍历一个容器 ...