<!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. Linux下编译安装MySQL

    一.环境准备yum install -y ncurses-devel libaio-develyum install -y cmake makeuseradd -s /sbin/nologin -M ...

  2. 关于如何获取Google 官方 NavgationView中的控件的方法

    最近在想要寻找一个好集成的SlidingMenu,看上了官方的DrawLayout,简单易集成 然后如果想动态改变DrawLayout头部的HeaderVIew的资源的话需要先获取到控件 方法如下 n ...

  3. CCPC2017湘潭 1263 1264 1267 1268

    1263 拉升一下就A了 #include <iostream> #include <vector> #include <algorithm> #include & ...

  4. ZOJ - 3661 pam

    题意:给一个字符串,和每个字符代表的val,每个回文串的价值就是前半部分的val26进制%777777777,求价值第k小的回文串 题解:建个pam,然后dfs两边(0,1),统计价值sort一遍就好 ...

  5. vue项目中引入第三方框架

    element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...

  6. VMware（虚拟机） 12版安装深度linux系统

    需要的工具: 1.VM ware workstation12虚拟机(可自行百度下载)  参考:VMware Workstation 12.5.5 官方中文正式版,下载地址:http://www.epi ...

  7. CF-413E-线段树

    http://codeforces.com/problemset/problem/413/E 给出一个2*N的格子图,每个格子要么是障碍要么是空地,M次询问(A,B)之间的最短距离. 采用分治的思想, ...

  8. Apache+PHP+MySQL+phpMyAdmin+WordPress搭建

    一 .安装Apache 下载地址:http://www.apachelounge.com/download/,选择Apache 2.4.25 Win64,解压缩,修改配置文件中如下地方: 1.Serv ...

  9. 【Java】XML

    一.XML XML(Extensible Markup Language),可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言. 格式: <?xml version="1. ...

  10. PE文件结构解析

    说明:本文件中各种文件头格式截图基本都来自看雪的<加密与解密>:本文相当<加密与解密>的阅读笔记. 1.PE文件总体结构 PE文件框架结构,就是exe文件的排版结构.也就是说我 ...