JavaScript实现点击单元格改变背景色的方法


Posted in Javascript onFebruary 12, 2016

本文实例讲述了JavaScript实现点击单元格改变背景色的方法。分享给大家供大家参考,具体如下:

<html>
<body>
<table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="93" height="29" background="hotlinkbg.gif" align="center">出租信息</td>
<td width="93" height="29" background="hotlinkbg.gif" align="center">求租信息</td>
<td width="314" height="29" background="hotlinkbg.gif" ></td>
</tr>
</table>
<table width="500">
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
</table>
<script tyle="text/javascript">
var oldClr = new Array()
function SetColor(e)
{
 if (!e) e = window.event;
 var obj
 if(window.event)
 obj = e.srcElement
 else
 obj = e.target
if(obj.tagName != "TD") return
var oldTD = obj
 while( obj.tagName != "TR")
 obj = obj.parentNode
 var i
 for(i = 0;i<obj.cells.length;i++)
 {
 if(obj.cells[i] == oldTD) break
 }
 var table = document.getElementById("_t")
 for(j = 0;j<table.rows.length;j++)
 {
 //如果要删除其它列的颜色,请加上下面的3行
 for(m = 0;m < table.rows[j].cells.length;m++)
 {
  table.rows[j].cells[m].background = oldClr[m]
 }
  //table.rows[j].cells[i].bgColor = table.rows[j].cells[i].background="button1_on.gif"
  table.rows[j].cells[i].background = table.rows[j].cells[i].background==oldClr[i]?"button1_on.gif":oldClr[i]
 }
}
window.onload = function()
{
 var table = document.getElementById("_t")
 for(j = 0;j<table.rows[0].cells.length;j++)
 {
 oldClr[j] = table.rows[0].cells[j].background
 }
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript面向对象编程代码
Dec 19 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 #Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 #Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 #Javascript
浅析javascript函数表达式
Feb 10 #Javascript
详解AngularJS中的http拦截
Feb 09 #Javascript
详解Javacript和AngularJS中的Promises
Feb 09 #Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
浅谈python写入大量文件的问题
2018/11/09 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python转换时间的图文方法
2019/07/01 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python time库基本使用方法分析
2019/12/13 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
python热力图实现简单方法
2021/01/29 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
中学教师自我鉴定
2014/02/07 职场文书
新闻学专业求职信
2014/07/28 职场文书
改革共识倡议书
2014/08/29 职场文书
诉讼授权委托书
2014/10/15 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
重阳节慰问信
2015/02/15 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python