主要用到两个事件

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. 关于使用Java开发Mis系统

    如何使用Java开发一个小型的信息管理系统,首先我们应该知道要使用什么样的方法. 1.Java基础 2.JSP+Servlet+JavaBean JSP是服务器端的编程语言,见得比较多的是在一些网站上 ...

  2. Leetcode 872. 叶子相似的树

    题目链接 https://leetcode-cn.com/problems/leaf-similar-trees/description/ 题目描述 请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到 ...

  3. 51nod 1554 KMP思维题

    题目为中文,因而不再解释题意. 首先遵循如下设定可以有以下几个结论:1,首先谈论下KMP的一个特殊性质:对于某一个特立独行的字符串:例如ABCDEF,在建立有限状态自动机之后,都会有,所有元素的失配边 ...

  4. JDK各版本新特性浅谈

    JDK 5.0 自动拆装箱 枚举 可变参数 泛型 For -each 内省 静态导入 JDK 6.0 console开发控制台程序 轻量级HTTP ServerAPI 支持脚本语言 使用Compile ...

  5. mybatis特殊字符处理

    在mybatis 的mapper.xml文件中特殊字符处理方式  仅供参考 出处:http://yaobenzhang.blog.163.com/blog/static/214395113201561 ...

  6. PHP 命名空间和自动加载

    PHP 命名空间 php5.3 之后引入了命名空间的特性,从本质上讲,命名空间就是一个容器,你可以将类.函数和变量放在其中,在命名空间中,你可以无条件地访问这些项,在命名空间之外,必须导入或引用命名空 ...

  7. windows server 2012 下IIS8.5关于“ 配置错误 不能在此路径中使用此配置节”的解决办法

    服务器升级为windows server 2012 r2后,发布在新装的IIS8.5上的网站不能访问,页面显示“500 - 内部服务器错误.” 在服务器上调试后,提示的错误信息为: 配置错误 不能在此 ...

  8. 求中位数为K的区间的数目

    给定一个长为 $n$ 的序列和常数 $k$,求此序列的中位数为 $k$ 的区间的数量.一个长为 $m$ 的序列的中位数定义为将此序列从小到大排序后第 $\lceil m / 2 \rceil$ 个数. ...

  9. BZOJ 4569 [Scoi2016]萌萌哒 ——ST表 并查集

    好题. ST表又叫做稀疏表,这里利用了他的性质. 显然每一个条件可以分成n个条件,显然过不了. 然后发现有许多状态是重复的,首先考虑线段树,没什么卵用. 然后ST表,可以每一层表示对应的区间大小的两个 ...

  10. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...