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 相关文章推荐
纯JS实现动态时间显示代码
Feb 08 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
Javascript实现秒表计时游戏
May 27 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
PHP对象链式操作实现原理分析
2016/10/09 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
python 日志增量抓取实现方法
2018/04/28 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
详解python 内存优化
2020/08/17 Python
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
财务经理岗位职责
2013/11/09 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python