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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
微信jssdk用法汇总
Jul 16 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
JS查找孩子节点简单示例
Jul 25 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Vue异步加载about组件
2017/10/31 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python基于ID3思想的决策树
2018/01/03 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python: 传递列表副本方式
2019/12/19 Python
浅谈Python中的模块
2020/06/10 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
简历上的自我评价
2014/02/03 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
春季运动会开幕词
2015/01/28 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
小学语文教师研修日志
2015/11/13 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python