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实现在小方框中浏览大图的代码
Aug 14 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
中国收音机工业发展史
2021/03/02 无线电
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python中redis的安装和使用
2016/12/04 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
求职者应聘的自我评价
2013/10/16 职场文书
村委会贫困证明
2014/01/14 职场文书
抽奖活动主持词
2014/03/31 职场文书
《锄禾》教学反思
2014/04/08 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年工程工作总结
2014/11/25 职场文书
师德先进个人材料
2014/12/20 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
js前端图片加载异常兜底方案
2022/06/21 Javascript