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程序设计有所帮助。

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中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
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