<!DOCTYPE html>

<html>

  <head>

    <title>colortable.html</title>

  <script language="javaScript">

      function changecolor(row){

         document.getElementById(row).style.backgroundColor='#CCCCFF';

      }

      function resetcolor(row){

         document.getElementById(row).style.backgroundColor='';

      }

  </script>

  </head>

  <body>

   <table width="200"border="1"cellspacing="1"cellpadding="1"align="center">

       <tr><th>学校</th><th>专业</th><th>人数</th></tr>

       <tr align="center"id="row1"onMouseOver="changecolor('row1')"onMouseOut="resetcolor('row1')">

       <th>北大</th><th>法律</th><th>2000</th>

       </tr>

       <tr align="center"id="row2"onMouseOver="changecolor('row2')"onMouseOut="resetcolor('row2')">

       <th>清华</th><th>计算机</th><th>5000</th>

       </tr>

           <tr align="center"id="row3"onMouseOver="changecolor('row3')"onMouseOut="resetcolor('row3')">

       <th>人大</th><th>经济</th><th>6000</th>

       </tr>

   </table>

  </body>

</html>

　　

JavaScript+CSS+DIV实现表格变色示例的更多相关文章

  1. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  2. 表格变色示例中发现的问题——attr()与prop()

    在练习jQuery表格变色例子过程中,发现了一下几个问题: 在IEEdge浏览器中切换选中行会出现上一个表格行背景色被吃掉的情况: 在chrome中从上向下单击行中任意单元可以选中该行,而从下往上单击 ...

  3. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  4. JavaScript+css+ div HTML遮罩層效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title ...

  5. CSS DIV中表格居中显示

    将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; widt ...

  6. 精通CSS+DIV基础总结（三）

    Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...

  7. 基于DIV+ul+li实现的表格(多示例)

    一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...

  8. 鼠标经过图片时变换的两种方法--css+div及javascript应用

    javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  9. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. spring cloud: Hystrix（五）：如禁止单个FeignClient使用hystrix

    spring cloud: Hystrix(五):如禁止单个FeignClient使用hystrix 首先application.yml / applicatoin.propreties的配置项:fe ...

  2. php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展

    php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展 1.首先确认下php.ini的安装位置 我的安装目录是: /usr/local/php 一般位置: /usr/local/ph ...

  3. 用R的igraph包来画蛋白质互作网络图 | PPI | protein protein interaction network | Cytoscape

    igraph语法简单,画图快速. Cytoscape专业,个性定制. 最终效果图: 当然也可以用Cytoscape来画. 参考:Network visualization with R Cytosca ...

  4. tornado web

    tornado web frame: 非阻塞服务器,速度快,运用epoll 模板语言+render(),实现根据用户输入,自动渲染页面的动态效果. 在使用模板前需要在setting中设置模板路径: s ...

  5. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  6. MYSQL 总结——1

    目录 数据类型 1.数值型 2.日期/时间型 3.文本型 数据库 1.创建数据库 2.删除数据库 数据表 1.创建数据表 create 2.删除数据表 drop 3.修改数据表 4.修改表名 5.dr ...

  7. centos7 keepalived+nginx实现vip漂移高可用

    一.Keepalived 简要介绍 Keepalived 是一种高性能的服务器高可用或热备解决方案, Keepalived 可以用来防止服务器单点故障的发生,通过配合 Nginx 可以实现 web 前 ...

  8. hdu-4738-tarjin/割边

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 求得是边权最小的割边,和求割点类似用tarjin,但要注意的是不能走从父亲过来的那一条边,在割点里那样理解 ...

  9. 4.Liunx磁盘管理

    1.磁盘管理:df .du 2.磁盘加载:mount. umount 3.磁盘分区:fdisk 1.df -h 查看硬件

  10. Python类的构成元素

    类的构成元素 公共属性:实例化时无需__init__方法绑定到对象,就可以直接使用:普通属性:实例化时 需要__ini__方法绑定到对象之后,才可以直接使用:私有属性:__sex 双下滑杠开头,需要在 ...