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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
解决layer.open后laydate失效的问题
Sep 06 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生成短域名函数
2015/03/23 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python插入排序算法的实现代码
2013/11/21 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python中Apriori算法实现讲解
2017/12/10 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
pytorch标签转onehot形式实例
2020/01/02 Python
Python内置异常类型全面汇总
2020/05/28 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
缓刑期间思想汇报范文
2014/10/10 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
奖励申请报告范文
2015/05/15 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Mysql中常用的join连接方式
2022/05/11 MySQL