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 相关文章推荐
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
js如何取消事件冒泡
Sep 23 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
详解Python pygame安装过程笔记
2017/06/05 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
在什么时候需要使用"常引用"
2015/12/31 面试题
大学学风建设方案
2014/05/04 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python面向对象编程之类的概念
2021/11/01 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技