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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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变量可用字符
2014/05/28 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
零基础写python爬虫之神器正则表达式
2014/11/06 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python实现电子书翻页小程序
2019/07/23 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
团队精神演讲稿
2013/12/31 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
中学生运动会入场词
2014/02/12 职场文书
学校门卫岗位职责
2014/03/16 职场文书
国窖1573广告词
2014/03/21 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python