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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
vue.js中created方法作用
Mar 30 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
Vue组件跨层级获取组件操作
Jul 27 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世纪万年历
2006/12/06 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
jquery获取input的value问题说明
2010/08/19 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python如何实现爬取B站视频
2020/05/20 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python3 kubernetes api的使用示例
2021/01/12 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
五一服装活动方案
2014/01/11 职场文书
部队万能检讨书
2014/02/20 职场文书
个人担保书范文
2014/05/20 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
网络营销计划
2015/01/17 职场文书
贷款承诺书
2015/01/20 职场文书