编程 Javascript

JS+CSS实现可以凹陷显示选中单元格的方法

Posted in Javascript onMarch 02, 2015

本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>JS+CSS实现可以凹陷显示选中的单元格</title>

<style>

td{cursor:hand;font-size:12px}

.click{border-top:1px solid #0033CC;border-bottom:1px solid #DDEEFF;border-left:1px solid #0033CC;border-right:1px solid #DDEEFF;padding-top:5px;padding-bottom:3px;padding-left:5px;padding-right:3px;}

.hover{border-top:1px solid #DDEEFF;border-bottom:1px solid #0033CC;border-left:1px solid #DDEEFF;border-right:1px solid #0033CC;padding:4px;}

.normal{border:1px solid #FFFFFF;padding:4px;}

</style>

</head>

<body>

<script>

function overbutton(){

 if(src=event.srcElement)

  if(src.className=="normal"){

   src.className='hover';

  }

}

function outbutton(){

 if(src=event.srcElement)

  if(src.className=="hover"){

   src.className='normal';

  }

}

function clickbutton(){

 if(src=event.srcElement)

  if(src.className=="hover"){

      var cells=document.all.button.rows[0].cells;

   for (i=0;i<cells.length ;i++ )

   {cells[i].className="normal";

   }

   src.className='click';

  }

}
document.onmouseover=overbutton

document.onmouseout=outbutton

document.onclick=clickbutton</script>

<TABLE id=button>

<TR>

 <TD class=click>日报</TD>

 <TD class=normal>周报</TD>

 <TD class=normal>月报</TD>

 <TD class=normal>季报</TD>

 <TD class=normal>日报</TD>

 <TD class=normal>周报</TD>

 <TD class=normal>月报</TD>

 <TD class=normal>季报</TD>

</TR>

</TABLE>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript isPrototypeOf和hasOwnProperty使用区别

Mar 04 Javascript

23个超流行的jQuery相册插件整理分享

Apr 25 Javascript

JQuery里面的几种选择器查找满足条件的元素$("#控件ID")

Aug 23 Javascript

JavaScript的作用域和块级作用域概念理解

Sep 21 Javascript

JavaScript对数组进行随机重排的方法

Jul 22 Javascript

微信小程序地图map实例详解

Jun 07 Javascript

基于jQuery和CSS3实现APPLE TV海报视差效果

Jun 16 jQuery

React 子组件向父组件传值的方法

Jul 24 Javascript

NW.js 简介与使用方法

Feb 01 Javascript

详解vue-router 命名路由和命名视图

Jun 01 Javascript

在微信小程序里使用watch和computed的方法

Aug 02 Javascript

JS实现点击发送验证码 xx秒后重新发送功能

Jul 30 Javascript

JavaScript数组常用方法

Mar 02 #Javascript

使用npm发布Node.JS程序包教程

Mar 02 #Javascript

js实现点击链接后窗口缩小并居中的方法

Mar 02 #Javascript

运行Node.js的IIS扩展iisnode安装配置笔记

Mar 02 #Javascript

Javascript动画的实现原理浅析

Mar 02 #Javascript

JavaScript页面模板库handlebars的简单用法

Mar 02 #Javascript

EasyUI中实现form表单提交的示例分享

Mar 01 #Javascript

You might like

PHP和Mysqlweb应用开发核心技术第1部分 Php基础－1 开始了解php

2011/07/03 PHP

PHP求小于1000的所有水仙花数的代码

2012/01/10 PHP

php实现图片添加水印功能

2014/02/13 PHP

php使用fopen创建utf8编码文件的方法

2014/10/31 PHP

Laravel 5.3 学习笔记之安装

2016/08/28 PHP

数据结构之利用PHP实现二分搜索树

2020/10/25 PHP

js电信网通双线自动选择技巧

2008/11/18 Javascript

jquery js 重置表单 reset()具体实现代码

2013/08/05 Javascript

javascript:void(0)是什么意思示例介绍

2013/11/17 Javascript

javascript实现的一个带下拉框功能的文本框

2014/05/08 Javascript

Javascript 中创建自定义对象的方法汇总

2014/12/04 Javascript

JavaScript判断按钮被点击的方法

2015/12/13 Javascript

javascript精确统计网站访问量实例代码

2015/12/19 Javascript

JS实现简单的右下角弹出提示窗口完整实例

2016/06/21 Javascript

基于jQuery实现歌词滚动版音乐播放器的代码

2016/09/17 Javascript

jQuery插件zTree实现删除树子节点的方法示例

2017/03/08 Javascript

通过js控制时间,一秒一秒自己动的实例

2017/10/25 Javascript

webpack4+Vue搭建自己的Vue-cli项目过程分享

2018/08/29 Javascript

使用webpack搭建vue环境的教程详解

2019/12/31 Javascript

详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

2020/04/27 Javascript

jQuery插件实现图片轮播效果

2020/10/19 jQuery

[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250

2016/01/20 Python

Python编程修改MP3文件名称的方法

2017/04/19 Python

Python Grid使用和布局详解

2018/06/30 Python

10分钟教你用Python实现微信自动回复功能

2018/11/28 Python

Python3爬楼梯算法示例

2019/03/04 Python

python装饰器原理与用法深入详解

2019/12/19 Python

详解Pycharm与anaconda安装配置指南

2020/08/25 Python

Python根据字典的值查询出对应的键的方法

2020/09/30 Python

公司前台接待岗位职责

2013/12/03 职场文书

大学军训自我鉴定

2013/12/15 职场文书

中年人生感言

2014/02/04 职场文书

作风年建设汇报材料

2014/08/14 职场文书

2015质检员个人年终工作总结

2015/10/23 职场文书

2016学校先进党组织事迹材料

2016/02/29 职场文书