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 confirm()方法的使用方法实例
Jul 13 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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中函数的形参与实参的问题说明
2010/09/01 PHP
PHP实现的简单日历类
2014/11/29 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php导入模块文件分享
2015/03/17 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python实现的解析crontab配置文件代码
2014/06/30 Python
Python实现基本线性数据结构
2016/08/22 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python中return self的用法详解
2018/07/27 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python3 字符串知识点学习笔记
2020/02/08 Python
财务管理专业应届毕业生求职信
2013/09/22 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
英语系毕业生求职信
2014/07/13 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
入党转正介绍人意见
2015/06/03 职场文书
国富论读书笔记
2015/06/26 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android