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 13 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 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
Zerg剧情介绍
2020/03/14 星际争霸
解析php中array_merge与array+array的区别
2013/06/21 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
单位门卫岗位职责
2013/12/20 职场文书
阿德的梦教学反思
2014/02/06 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
森林防火工作方案
2014/02/14 职场文书
新闻学专业求职信
2014/07/28 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书