HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script>

            window.onload = function() {

                //1.获取表格

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

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

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

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

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

                    if(i % 2 == 0) {

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

                        tblEle.tBodies[0].rows[i].style.backgroundColor = "blue";

                    } else {

                        //5.对奇数行设置背景颜色

                        tblEle.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>

效果：

表格高亮显示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script>

            function changeColor(id, flag) {

                if(flag == "over") {

                    document.getElementById(id).style.backgroundColor = "red";

                } else if(flag == "out") {

                    document.getElementById(id).style.backgroundColor = "yellow";

                }

            }

        </script>

    </head>

    <body>

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

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">

                    <td>4</td>

                    <td>小明</td>

                    <td>29</td>

                </tr>

                <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">

                    <td>5</td>

                    <td>小红</td>

                    <td>30</td>

                </tr>

                <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">

                    <td>6</td>

                    <td>小刚</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

效果：

鼠标移到上面变成红色，移开变成黄色，不移动时候没有颜色

JS应用实例4：表格隔行换色的更多相关文章

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

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

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

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

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

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

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

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

  5. table 表格隔行换色实现

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

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

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

  7. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  8. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  9. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

随机推荐

  1. Controller层aop

    利用@Around通知修改Controller的返回值 自定义一个注解@OperationBtn 在切入点Controller上加上自定义注解 接下来就是重点了,AspectJ写切面类,对该Contr ...

  2. faster-RCNN框架之rpn　较小目标检测，如果只使用ｒｐｎ，并减少多个候选框

    通常faster-rcnn目标检测有两个步骤,一个是侯选框生成,一个是侯选框微调+目标区分,但是对于单目标识别, 我经常喜欢只使用rpn网络,效果还不错,不过仅仅的rpn使用参考的参数通常会造成一个目 ...

  3. cdnbest节点动态ip配置教程

    1.安装节点后,在未初始化里初始化节点,如下图操作,要选择动态ip(注:动态ip节点不支持添加辅ip) 服务器如果是动态ip,选择了动态ip选项,节点在自动更换了新的ip后,在节点列表里的ip和dns ...

  4. 页面引入js问题

    今日问题:左侧菜单栏多余的菜单不可以滚动,自己找了很长时间,前端同事帮忙找了很长事件,最后帮我找到问题所在. 这里红色部分标识有多余部分,可以滑动是对的.但是滑动了. 问题:jquery引入的地方错了 ...

  5. EF ++属性会更新实体

    var lastBaby = await _babyRepository.FirstOrDefaultAsync(); ++lastBaby.sort; -- sort原本为1 -- 最终会生成一条语 ...

  6. sql语句-单表查询

    一:单表查询 CREATE TABLE `Score`( `s_id` ), `c_id` ), `s_score` ), PRIMARY KEY(`s_id`,`c_id`) ); ); ); ); ...

  7. php上传多张图片

    第一种:加后缀 代码实现(就是普通的上传图片,只是在外面加个foreach循环) $allow_file_types = '|GIF|JPG|PNG|BMP|SWF|DOC|XLS|PPT|MID|W ...

  8. PHP脚本命令行执行成功，CRON无法执行故障解决记录

    先来看看一个最简单的PHP文件(ip.php) <?php $myip = get_ip_cmd(); echo($myip); // get ip address function get_i ...

  9. 第七次spring会议

    昨天我对加密文件进行了解密. 我今天对已完成的代码进行了总体运行,检查运行中出现的bug,在显示便签中出现了过长就无法一次显示完全的情况,没有办法

  10. Android 软件退出系统方法重写

    Android 软件退出系统按键方法重写 //针对Andriod软件退出系统按键方法重写 ;//key down time @Override public boolean onKeyDown(int ...