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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
深入理解js generator数据类型
Aug 16 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
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/03/02 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
斜45度寻路实现函数
2009/08/20 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python实现Flappy Bird源码
2018/12/24 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
小学生爱国演讲稿
2014/04/25 职场文书
论文评语大全
2014/04/29 职场文书
党在我心中演讲稿
2014/09/02 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
python 命令行传参方法总结
2021/05/25 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python