用到的知识点：

获取表格元素

tbody 和 rows都是有索引的

这里我们只有一组tbody所以 索引是0

偶数行 索引取余2为0

奇数行 索引取余2不为0

通过 遍历行索引设置相应的颜色。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格隔行换色</title>

        <script type="text/javascript">

            window.onload=function(){

                //1.获取表格

                var tbEle=document.getElementById("tbl");

                //2.获取表格中tbody里面的行数(长度)

                var len=tbEle.tBodies[0].rows.length;

                //3.对tbody里面的行进行遍历

                for(var i=0;i<len;i++){

                    if(i%2==0){

                        //4.对偶数行设置背景颜色

                        tbEle.tBodies[0].rows[i].style.backgroundColor="pink";

                    }else{

                        tbEle.tBodies[0].rows[i].style.backgroundColor="gold";

                    }

                }

            }

        </script>

    </head>

    <body >

        <table border="1" width="500" height="50" align="center" id="tbl">

            <thead>

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>年龄</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>22</td>

            </tr>

            <tr>

                <td>2</td>

                <td>李四</td>

                <td>25</td>

            </tr>

            <tr>

                <td>3</td>

                <td>王五</td>

                <td>27</td>

            </tr>

            <tr>

                <td>4</td>

                <td>赵六</td>

                <td>29</td>

            </tr>

            <tr>

                <td>5</td>

                <td>田七</td>

                <td>30</td>

            </tr>

            <tr>

                <td>6</td>

                <td>汾九</td>

                <td>20</td>

            </tr>

            </tbody>

        </table>

    </body>

</html>

javascript 表格隔行换色的更多相关文章

  1. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  4. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  5. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  8. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  9. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

随机推荐

  1. Thinkphp 支付宝插件的引入 和调用

    本文版权归本宝宝所有 未得允许不得转载 下载地址传送门 https://doc.open.alipay.com/docs/doc.htm?spm=a219a.7629140.0.0.twLYka&am ...

  2. 嵌入式Linux环境搭建备忘

    嵌入式Linux开发平台搭建步骤: 1.安装宿主机Linux系统 如果选用最新的Linux发行版,应改主意其他软件是否能很好的兼容. 2.安装交叉编译器 交叉编译器的版本很多,一般到芯片厂家官网下载官 ...

  3. C++实例 MySTLString

    #include <iostream> #include <cstring> #include <string> using namespace std; clas ...

  4. Codeforces Round #464 (Div. 2) D. Love Rescue

    D. Love Rescue time limit per test2 seconds memory limit per test256 megabytes Problem Description V ...

  5. 动态规划：最长上升子序列之基础（经典算法 n^2）

    解题心得: 1.注意动态转移方程式,d[j]+1>d[i]>?d[i]=d[j]+1:d[i] 2.动态规划的基本思想:将大的问题化为小的,再逐步扩大得到答案,但是小问题的基本性质要和大的 ...

  6. Proguard returned with error code 1. See console

    满世界的bug. 微信支付,Windows的远程桌面. Android的 , Proguard returned with error code 1. See console解决办法" 真的 ...

  7. 史上最权威的 Activiti 框架学习

        Activiti5 是 由 Alfresco 软件在 2010 年 5 月 17 日发布的业务流程管理( BPM) 框架,它是覆盖了业务流程管理.工作流.服务协作等领域 的一个开源的.灵活的. ...

  8. 设计模式之第13章-职责链模式(Java实现)

    设计模式之第13章-职责链模式(Java实现) “请假都那么麻烦,至于么.”“咋的了?”“这不快过年了么,所以我想早两天回去,准备一下,买买东西什么的,然后去给项目经理请假,但是他说快过年了,所以这个 ...

  9. IOS开发学习笔记023-UIToolBar的使用

    这里使用代码实现 大概过程: 1.创建工具条 2.创建插入条 3.添加头像.标签.删除按钮 4.点击头像获取标签信息 做一个简单的联系人列表,可以添加删除联系人,现在还没有添加头像和文字,接下来慢慢添 ...

  10. sql注入过滤了#,--+怎么办

    题目是NCTF2018的web题目 第一段是错误的思路,第二段是晚上有思考后发现的直接看第二段吧. ① ?id=1'会直接出来报错提示. 猜测使用单引号保护id. 另外一打空格就提示you hacke ...