<!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. 静默安装/ 普通安装与root权限获取相关

    静默安装 有时候使用第三方的插件时我们需要静默安装其提供的apk包,静默安装时我们需要获取root权限,如下代码 Process process = Runtime.getRuntime().exec ...

  2. apiCloud 双击事件

    apiCloud 双击事件只能使用纯js去写 var app = new Vue({ el: "#app", data: function() { return { token: ...

  3. 统计数组中各个元素出现的次数，元素取值范围为：1到N

     问题描述: * 给定一个整数数组a,长度为N,元素取值范围为[1,N]. * 统计各个元素出现的次数,要求时间复杂度为O(N),空间复杂度为O(1). * 可以改变原来数组结构.  思路: * 从第 ...

  4. c 语言连续输入字符型数据

    #include<stdio.h> #include<stdlib.h> void Input1(char* &str){ // /* 这种情况下想要逐个输入字符串数组 ...

  5. linux安装curl扩展

    1.获得安装包,从网上直接下载或者其他途径,这里直接wget wget http://curl.haxx.se/download/curl-7.20.0.tar.gz 2.解压到当前目录(或者 htt ...

  6. 廖雪峰网站：学习python函数—函数参数（三）

    1.*args # 位置参数,计算x2的函数 def power(x): return x * x p = power(5) print(p) # 把power(x)修改为power(x, n),用来 ...

  7. appium自动化测试(四)

    一. 获取webview的html页面 方法一: 1. 获取webview中对应的html页面 谷歌浏览器中输入地址:chrome://inspect(第一次使用要FQ) 前提:手机开启USB调试模式 ...

  8. Leetcode 869. 重新排序得到 2 的幂

    869. 重新排序得到 2 的幂  显示英文描述 我的提交返回竞赛   用户通过次数102 用户尝试次数134 通过次数103 提交次数296 题目难度Medium 从正整数 N 开始,我们按任何顺序 ...

  9. GetMapping 和 PostMapping最大的差别（转）

    原文地址:GetMapping 和 PostMapping  Spring4.3中引进了{@GetMapping.@PostMapping.@PutMapping.@DeleteMapping.@Pa ...

  10. 【转】MVC5学习笔记 BindAttribute

    // POST: Movies/Create // 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关 // 详细信息,请参阅 http://go.microsoft.com/fwlink/?L ...