编程 Javascript

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

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 模式设计之工厂模式详细说明

May 10 Javascript

jquery实现metro效果示例代码

Sep 06 Javascript

浅谈Javascript 数组与字典

Jan 29 Javascript

jquery简单倒计时实现方法

Dec 18 Javascript

jQuery获得字体颜色16位码的方法

Feb 20 Javascript

jQuery中each()、find()和filter()等节点操作方法详解(推荐)

May 25 Javascript

Google 地图事件实例讲解

Aug 06 Javascript

Angularjs的$http异步删除数据详解及实例

Jul 27 Javascript

纯javascript实现选择框的全选与反选功能

Apr 08 Javascript

详解javascript对数组和json数组的操作

Apr 15 Javascript

详解VScode编辑器vue环境搭建所遇问题解决方案

Apr 26 Javascript

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

Feb 24 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

Discuz 6.0+ 批量注册用户名

2009/09/13 PHP

php数组函数序列之array_intersect() 返回两个或多个数组的交集数组

2011/11/10 PHP

PHP删除数组中特定元素的两种方法

2013/07/02 PHP

PHP封装分页函数实现文本分页和数字分页

2014/10/23 PHP

PHP的PDO大对象(LOBs)

2019/01/27 PHP

jquery插件jbox使用iframe关闭问题

2009/02/09 Javascript

JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享

2013/07/02 Javascript

JavaScrip实现PHP print_r的数功能（三种方法）

2013/11/12 Javascript

jQuery元素的隐藏与显示实例

2015/01/20 Javascript

jquery实现红色竖向多级向右展开的导航菜单效果

2015/08/31 Javascript

浅谈javascript中的call、apply、bind

2016/03/06 Javascript

基于bootstrap插件实现autocomplete自动完成表单

2016/05/07 Javascript

解析AngularJS中get请求URL出现的跨域问题

2016/12/01 Javascript

JS批量替换内容中关键词为超链接

2017/02/20 Javascript

详解关于Angular4 ng-zorro使用过程中遇到的问题

2018/12/05 Javascript

对TypeScript库进行单元测试的方法

2019/07/18 Javascript

JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

2019/10/16 jQuery

JavaScript设计模式之策略模式实现原理详解

2020/05/29 Javascript

[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP

2016/03/05 DOTA

使用python检测手机QQ在线状态的脚本代码

2013/02/10 Python

python使用urllib2提交http post请求的方法

2015/05/26 Python

Python 结巴分词实现关键词抽取分析

2017/10/21 Python

遗传算法python版

2018/03/19 Python

python如何实现一个刷网页小程序

2018/11/27 Python

Python3实现对列表按元组指定列进行排序的方法分析

2018/12/22 Python

Python enumerate内置库用法解析

2020/02/24 Python

Python编写memcached启动脚本代码实例

2020/08/14 Python

中国宠物用品商城：E宠商城

2016/08/27 全球购物

阿迪达斯丹麦官网：adidas丹麦

2016/10/01 全球购物

大学生学期自我鉴定

2014/03/19 职场文书

幼师辞职信范文

2015/02/27 职场文书

2015秋季幼儿园开学寄语

2015/03/25 职场文书

2015年农村党员干部主题教育活动总结

2015/03/25 职场文书

男人帮观后感

2015/06/18 职场文书

学生会部长竞选稿

2015/11/19 职场文书

PyTorch中permute的使用方法

2022/04/26 Python