编程 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 相关文章推荐

JQuery中each()的使用方法说明

Aug 19 Javascript

JavaScript 计算图片加载数量的代码

Jan 01 Javascript

各浏览器对click方法的支持差异小结

Jul 31 Javascript

javascript分页代码(当前页码居中)

Sep 20 Javascript

js处理json以及字符串的比较等常用操作

Sep 08 Javascript

Angularjs全局变量被作用域监听的正确姿势

Feb 06 Javascript

使用Xcache缓存器加速PHP网站的配置方法

Apr 22 Javascript

JS canvas绘制五子棋的棋盘

May 28 Javascript

Vue 之孙组件向爷组件通信的实现

Apr 23 Javascript

vue 集成 vis-network 实现网络拓扑图的方法

Aug 07 Javascript

浅谈关于vue中scss公用的解决方案

Dec 02 Javascript

JavaScript中如何对多维数组(矩阵)去重的实现

Dec 04 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中var_export与var_dump的区别分析

2010/08/21 PHP

使用php判断服务器是否支持Gzip压缩功能

2013/09/24 PHP

微信 getAccessToken方法详解及实例

2016/11/23 PHP

基于thinkPHP类的插入数据库操作功能示例

2017/01/06 PHP

在Laravel5.6中使用Swoole的协程数据库查询

2018/06/15 PHP

jquery 模拟类搜索框自动完成搜索提示功能(改进)

2010/05/24 Javascript

jQuery实现视频作为全屏幕背景

2014/12/18 Javascript

JS实现先显示大图后自动收起显示小图的广告代码

2015/09/04 Javascript

总结Javascript中数组各种去重的方法

2016/10/04 Javascript

Vue.js组件tabs实现选项卡切换效果

2016/12/01 Javascript

JavaScript函数基础详解

2017/02/03 Javascript

JS实现简易换图时钟功能分析

2018/01/04 Javascript

使用ng-packagr打包Angular的方法示例

2018/09/21 Javascript

jQuery利用FormData上传文件实现批量上传

2018/12/04 jQuery

JavaScript禁用右键单击优缺点分析

2019/01/20 Javascript

JavaScript中的回调函数实例讲解

2019/01/27 Javascript

Javascript Worker子线程代码实例

2020/02/20 Javascript

vue-以文件流-blob-的形式-下载-导出文件操作

2020/08/07 Javascript

VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

2020/08/27 Javascript

wxPython窗口的继承机制实例分析

2014/09/28 Python

使用SAE部署Python运行环境的教程

2015/05/05 Python

python实现图像识别功能

2018/01/29 Python

Python实现模拟浏览器请求及会话保持操作示例

2018/07/30 Python

Python collections模块使用方法详解

2019/08/28 Python

Python操作Excel的学习笔记

2021/02/18 Python

一款纯css3实现的漂亮的404页面的实例教程

2014/11/27 HTML / CSS

使用数据结构给女朋友写个Html5走迷宫游戏

2019/11/26 HTML / CSS

加拿大奢华时装品牌：Mackage

2018/01/10 全球购物

如何判断计算机可能已经中马

2013/03/22 面试题

无偿献血倡议书

2014/04/14 职场文书

交通事故协议书范文

2014/04/16 职场文书

个人投资计划书

2014/05/01 职场文书

个人自荐材料

2014/05/23 职场文书

2016年春季运动会通讯稿

2015/11/25 职场文书

apache基于端口创建虚拟主机的示例

2021/04/24 Servers

Vue h函数的使用详解

2022/02/18 Vue.js