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 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php无限遍历目录示例
2014/02/21 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python重试装饰器示例
2014/02/11 Python
python求众数问题实例
2014/09/26 Python
python中self原理实例分析
2015/04/30 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Selenium定位元素操作示例
2018/08/10 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
简单了解python中的与或非运算
2019/09/18 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
反邪教警示教育方案
2014/05/13 职场文书
战略合作意向书
2014/07/29 职场文书
民用住房租房协议书
2014/10/29 职场文书
文化大革命观后感
2015/06/17 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏