编程 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 用原型继承来实现对象系统

Mar 22 Javascript

javascript获取所有同类checkbox选项(实例代码)

Nov 07 Javascript

jquery如何获取复选框的值

Dec 12 Javascript

JavaScript中Cookie操作实例

Jan 09 Javascript

浅谈JavaScript异步编程

Jan 20 Javascript

JS常见算法详解

Feb 28 Javascript

微信小程序 wx:for的使用实例详解

Apr 27 Javascript

vue 2.0项目中如何引入element-ui详解

Sep 06 Javascript

Swiper自定义分页器使用详解

Dec 28 Javascript

vuejs点击class变化的实例

Sep 05 Javascript

js 实现在2d平面上画8的方法

Oct 10 Javascript

vue项目中使用vue-i18n报错的解决方法

Jan 13 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 字符串中的\n换行符无效、不能换行的解决方法

2014/04/02 PHP

TP5框架实现签到功能的方法分析

2020/04/05 PHP

JavaScript 开发规范要求(图文并茂)

2010/06/11 Javascript

JQuery EasyUI 对话框的使用方法

2010/10/24 Javascript

js中top/parent/frame概述及案例应用

2013/02/06 Javascript

浅析jQuery1.8的几个小变化

2013/12/10 Javascript

jQuery中[attribute!=value]选择器用法实例

2014/12/31 Javascript

jquery实现简单实用的打分程序实例

2015/07/23 Javascript

jquery模拟实现鼠标指针停止运动事件

2016/01/12 Javascript

angularjs表格分页功能详解

2016/01/21 Javascript

JavaScript组件开发之输入框加候选框

2017/03/10 Javascript

前端主流框架vue学习笔记第二篇

2017/07/26 Javascript

js 开发之autocomplete="off"在chrom中失效的解决办法

2017/09/28 Javascript

浅谈Angular2 模块懒加载的方法

2017/10/04 Javascript

layui实现数据表格点击搜索功能

2020/03/26 Javascript

node.js使用stream模块实现自定义流示例

2020/02/13 Javascript

JavaScript中的函数式编程详解

2020/08/22 Javascript

[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局

2016/02/27 DOTA

python 默认参数问题的陷阱

2016/02/29 Python

tensorflow 获取模型所有参数总和数量的方法

2018/06/14 Python

python3.6使用urllib完成下载的实例

2018/12/19 Python

爬虫代理池Python3WebSpider源代码测试过程解析

2019/12/20 Python

python实现录屏功能(亲测好用)

2020/03/02 Python

Python使用进程Process模块管理资源

2020/03/05 Python

职业生涯规划书基本格式

2014/01/06 职场文书

公司会议策划方案

2014/05/17 职场文书

竞选班干部演讲稿100字

2014/08/20 职场文书

竞选班干部演讲稿500字

2014/08/20 职场文书

大学团日活动新闻稿

2014/09/10 职场文书

房产协议书范本2014

2014/09/30 职场文书

2014年教师个人工作总结

2014/11/10 职场文书

2015年员工试用期工作总结

2014/12/12 职场文书

民间借贷纠纷答辩状

2015/08/03 职场文书

幼儿园国培研修日志

2015/11/13 职场文书

雄兵连：第三季先行图公开，天使恶魔联合，银河之力的新力量

2021/06/11 国漫

redis数据一致性的实现示例

2022/03/18 Redis