编程 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 31 Javascript

javascript 一个函数对同一元素的多个事件响应

Jul 25 Javascript

JavaScript高级程序设计阅读笔记（七） ECMAScript中的语句

Feb 27 Javascript

使用js正则控制input标签只允许输入的值

Jul 29 Javascript

JavaScript设计模式之适配器模式介绍

Dec 28 Javascript

jquery ui dialog替代confirm实例分析

Jan 25 Javascript

实例详解jQuery的无new构建

Aug 02 Javascript

jQuery弹出下拉列表插件（实现kindeditor的@功能）

Aug 16 Javascript

在JSP中如何实现MD5加密的方法

Nov 02 Javascript

JS中的JSON对象的定义和取值实现代码

May 09 Javascript

微信小程序支付PHP代码

Aug 23 Javascript

ajax跨域访问遇到的问题及解决方案

May 23 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

smtp邮件发送一例

2006/10/09 PHP

ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法

2014/06/25 PHP

PHP mkdir创建文件夹实现方法解析

2020/11/13 PHP

JS 两个字符串时间的天数差计算

2013/08/25 Javascript

jquery 删除cookie失效的解决方法

2013/11/12 Javascript

JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

2014/04/03 Javascript

form.submit()不能提交表单的错误原因及解决方法

2014/10/13 Javascript

jquery中push()的用法(数组添加元素)

2014/11/25 Javascript

javascript实现链接单选效果的方法

2015/05/13 Javascript

简介JavaScript中toTimeString()方法的使用

2015/06/12 Javascript

BootStrap glyphicons 字体图标实现方法

2016/05/01 Javascript

Javascript this 函数深入详解

2016/12/13 Javascript

react.js 翻页插件实例代码

2017/01/19 Javascript

Vue声明式渲染详解

2017/05/17 Javascript

ionic2中使用自动生成器的方法

2018/03/04 Javascript

react-native 圆弧拖动进度条实现的示例代码

2018/04/12 Javascript

浅谈从React渲染流程分析Diff算法

2018/09/08 Javascript

vuex + keep-alive实现tab标签页面缓存功能

2019/10/17 Javascript

详解JavaScript中的this指向问题

2021/02/05 Javascript

基python实现多线程网页爬虫

2015/09/06 Python

[原创]使用豆瓣提供的国内pypi源

2017/07/02 Python

Python操作word常见方法示例【win32com与docx模块】

2018/07/17 Python

Python常见的pandas用法demo示例

2019/03/16 Python

python模块和包的应用BASE_PATH使用解析

2019/12/14 Python

pytorch实现MNIST手写体识别

2020/02/14 Python

python 最简单的实现适配器设计模式的示例

2020/06/30 Python

常用的10个Python实用小技巧

2020/08/10 Python

python制作微博图片爬取工具

2021/01/16 Python

python读取excel数据并且画图的实现示例

2021/02/08 Python

美国新蛋IT数码商城：Newegg.com

2016/07/21 全球购物

Doyoueven官网：澳大利亚健身服饰和配饰品牌

2019/03/24 全球购物

三星俄罗斯授权在线商店：Samsung俄罗斯

2019/09/28 全球购物

JACK & JONES荷兰官网：男士服装和鞋子

2021/03/07 全球购物

中英文自我评价语句

2013/12/20 职场文书

领导干部作风整顿剖析材料

2014/10/11 职场文书

为什么node.js不适合大型项目

2021/04/28 Javascript