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 tools之tabs 选项卡/页签
Jul 25 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php表单提交与$_POST实例分析
2015/01/26 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
实现vuex原理的示例
2020/10/21 Javascript
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python 实现数组相减示例
2019/12/27 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
员工教育培训协议书
2014/09/27 职场文书
道歉信怎么写
2015/05/12 职场文书
办公室日常管理制度
2015/08/04 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers