编程 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 更新 JavaScript 数组的 uniq 方法

Jan 23 Javascript

javascript 使用 NodeList需要注意的问题

Mar 04 Javascript

jQuery满意度星级评价插件特效代码分享

Aug 19 Javascript

jQuery EasyUI 布局之动态添加tabs标签页

Nov 18 Javascript

JavaScript代码生成PDF文件的方法

Feb 26 Javascript

js滑动提示效果代码分享

Mar 10 Javascript

jQuery实现简易的输入框字数计数功能示例

Jan 16 Javascript

jQuery初级教程之网站品牌列表效果

Aug 02 jQuery

bootstrap table服务端实现分页效果

Aug 10 Javascript

js的对象与函数详解

Jan 21 Javascript

javascript面向对象三大特征之封装实例详解

Jul 24 Javascript

基于iview-admin实现动态路由的示例代码

Oct 02 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获取远程图片的两种 CURL方式和sockets方式获取远程图片

2011/11/07 PHP

php数组比较实现查找连续数的方法

2015/07/29 PHP

浅谈php+phpStorm+xdebug配置方法

2015/09/17 PHP

PHP5.6读写excel表格文件操作示例

2019/02/26 PHP

php自定义排序uasort函数示例【二维数组按指定键值排序】

2019/06/19 PHP

在Javascript中声明时用"var"与不用"var"的区别

2013/04/15 Javascript

浅析ajax请求json数据并用js解析(示例分析)

2013/07/13 Javascript

textarea焦点的用法实现获取焦点清空失去焦点提示效果

2014/05/19 Javascript

jQuery动画出现连续触发、滞后反复执行的解决方法

2015/01/28 Javascript

javascript封装简单实现方法

2015/08/11 Javascript

jQuery实现浮动层随浏览器滚动条滚动的方法

2015/09/22 Javascript

微信小程序 scroll-view组件实现列表页实例代码

2016/12/14 Javascript

jQuery Ajax实现跨域请求

2017/01/21 Javascript

详解vue-router2.0动态路由获取参数

2017/06/14 Javascript

AngularJS 实现购物车全选反选功能

2017/10/24 Javascript

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

2019/05/27 jQuery

如何给element添加一个抽屉组件的方法步骤

2019/07/14 Javascript

微信小程序实现手势滑动效果

2019/08/26 Javascript

如何用JS模拟实现数组的map方法

2020/07/30 Javascript

[01:11]回顾历届DOTA2国际邀请赛中国区预选赛

2017/06/26 DOTA

python多线程http下载实现示例

2013/12/30 Python

使用Django的模版来配合字符串翻译工作

2015/07/27 Python

速记Python布尔值

2017/11/09 Python

python中学习K-Means和图片压缩

2017/11/20 Python

解决python nohup linux 后台运行输出的问题

2018/05/11 Python

Python3 利用requests 库进行post携带账号密码请求数据的方法

2018/10/26 Python

Django models.py应用实现过程详解

2019/07/29 Python

Python 数据的累加与统计的示例代码

2020/08/03 Python

python根据字典的键来删除元素的方法

2020/08/16 Python

python excel和yaml文件的读取封装

2021/01/12 Python

菲律宾最大的网上花店和礼品店：PhilFlower.com

2018/02/09 全球购物

七年级上册语文教学计划

2015/01/22 职场文书

django上传文件的三种方式

2021/04/29 Python

MySQL定时备份数据库(全库备份)的实现

2021/09/25 MySQL

Go语言并发编程 sync.Once

2021/10/16 Golang

Java GUI编程菜单组件实例详解

2022/04/07 Java/Android