<!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. HTML第三章总结

    在这一章节中,主要讲了 HTML 中众多的 element,element 就像在建筑房屋时候的材料,它可以分为两种: Block Element Inline ElementBlock Elemen ...

  2. request.POST 和 request.GET

    通过request.POST属性   得到<提交的表单数据>,也是一个类字典对象.request.GET属性 ,得到<URL中的keyvalue请求参数>,也是一个类字典对象.

  3. 2018-02-16 GetSameTypeQuestion

    '目前存在的BUG '图片补丁存在多个URL Private Declare Function URLDownloadToFile Lib "urlmon" Alias " ...

  4. display:inline-block与float

    display:inline-block 既有行级元素的特性,也有块级元素的特性,因此在同一行,能设置宽高,margin,padding inline-block和float的区别 虽然设置float ...

  5. Linux系统起源及主流发行版

    Linux系统起源及主流发行版   本文首先介绍了三大服务器系统,然后介绍了Linux系统的出现背景.以及主要release版本,最后介绍了Linux的文件系统和目录结构.   服务器系统,即安装在服 ...

  6. python记录_day04（补充）

    列表删除 切片删除 del lis[1:3]  # 删除索引是1,2的元素 修改 索引切片修改 # 修改 lst = ["太白", "太", "五&q ...

  7. 『算法设计_伪代码』贪心算法_最短路径Dijkstra算法

    Dijkstra算法实际上是一个贪婪算法(Greedy algorithm).因为该算法总是试图优先访问每一步循环中距离起始点最近的下一个结点.Dijkstra算法的过程如下图所示. 初始化 给定图中 ...

  8. leetcode-algorithms-5 Longest Palindromic Substring

    leetcode-algorithms-5 Longest Palindromic Substring Given a string s, find the longest palindromic s ...

  9. Linux上部署多个tomcat端口设置

    在Linux上部署多个tomcat主要是防止端口冲突的问题, tomcat服务器需配置三个端口才能启动,安装时默认启用了这三个端口,当要运行多个tomcat服务时需要修改这三个端口,不能相同.端口一: ...

  10. java中equals与==的比较

    总结来说: 1)对于==,如果作用于基本数据类型的变量,则直接比较其存储的 “值”是否相等: 如果作用于引用类型的变量,则比较的是所指向的对象的地址 2)对于equals方法,注意:equals方法不 ...