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学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 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
2020最新CPU的性能排名
2020/04/02 数码科技
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
分享3个php获取日历的函数
2015/09/25 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
django框架使用方法详解
2019/07/18 Python
django 环境变量配置过程详解
2019/08/06 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
你对IPv6了解程度
2016/02/09 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
工作人员思想汇报
2014/01/09 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
对公司的意见和建议
2015/06/04 职场文书
2016年公司新年寄语
2015/08/17 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript