主要用到两个事件

onmouseover

onmouseout

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script type="text/javascript">

            function changeColor(id,flag){

                if(flag=="over"){

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

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

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

                }

            }

        </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 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>

javascript 移动鼠标高亮显示改行的更多相关文章

  1. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  2. JavaScript onmousewheel鼠标滚轮示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Javascript屏蔽鼠标右键-超简单，不过还是记录一下

    Javascript屏蔽鼠标右键,其实作用也不大,也许是为了防止别人查看源代码,其实想查看源代码有多种途径,未必需要通过鼠标右键.不过当我们自定义鼠标右键弹出菜单时,也许需要这些. 下面是源码: 1 ...

  4. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  5. JavaScript模拟鼠标右键菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javaScript判断鼠标滚轮的上下滚动

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...

  7. javascript模拟鼠标双击事件

    通常我们在做开发的时候需要通过单击切换对立事件,简单做了一个模型. <!DOCTYPE html> <html> <head> <title>javas ...

  8. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  9. 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

    在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...

随机推荐

  1. 模块之 logging模块 time 模块 random模块 sys模块 pickle模块

    1.如果执行文件不在项目根目录下,需要添加项目根目录到sys.path中2.调用业务逻辑 2.logging模块 程序日志是 什么时间发生了什么事情,以及当时的情况 不是logging的话 记录日志的 ...

  2. 动态规划：HDU-1398-Square Coins（母函数模板）

    解题心得: 1.其实此题有两种做法,动态规划,母函数.个人更喜欢使用动态规划来做,也可以直接套母函数的模板 Square Coins Time Limit: 2000/1000 MS (Java/Ot ...

  3. CQRS之旅——旅程3(订单和注册限界上下文)

    旅程3:订单和注册限界上下文 CQRS之旅的第一站 "寓言家和鳄鱼是一样的,只是名字不同" --约翰·劳森 描述: 订单和注册上下文有一部分职责在会议预订的过程中,在此上下文中,一 ...

  4. OpenCV学习笔记（七） 图像金字塔 阈值 边界

    转自: OpenCV 教程 使用 图像金字塔 进行缩放 图像金字塔是视觉运用中广泛采用的一项技术.一个图像金字塔是一系列图像的集合 - 所有图像来源于同一张原始图像 - 通过梯次向下采样获得,直到达到 ...

  5. proguaid 混淆代码

    注意:这里有一个坑.就是-ignorewarnings 他老是混淆不了,告诉你不行.其实加上这句话,就可以了. 下面贴一下代码: -injars c:/ceb_lib.jar -outjars c:/ ...

  6. [转]Git for windows 下vim解决中文乱码的有关问题

    Git for windows 下vim解决中文乱码的问题 原文链接:Git for windows 下vim解决中文乱码的有关问题 1.右键打开Git bash: 2.cd ~ 3.vim .vim ...

  7. 转投emacs

    (global-set-key [f9] 'compile-file) (global-set-key [f10] 'gud-gdb) (global-set-key (kbd "C-z&q ...

  8. 7、JavaScript 知识总结

    1.JavaScript的作用 ①JavaScript 为 HTML 设计师提供了一种编程工具 ②JavaScript 可以将动态的文本放入 HTML 页面 ③JavaScript 可以对事件作出响应 ...

  9. Bit Operation妙解算法题

    5道巧妙位操作的算法题. ***第一道*** 题目描述 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. ...

  10. c++ 中的slipt实现

    来自 http://www.cnblogs.com/dfcao/p/cpp-FAQ-split.html http://blog.diveinedu.com/%E4%B8%89%E7%A7%8D%E5 ...