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 prototype属性深入介绍
Nov 27 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP7多线程搭建教程
2017/04/21 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
详解Angular 自定义结构指令
2017/06/21 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
pandas数据集的端到端处理
2019/02/18 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
MySQL面试题目集锦
2016/04/14 面试题
单位员工收入证明样本
2014/10/09 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js