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 load方法用法集锦
Dec 06 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
js+css实现扇形导航效果
Aug 18 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 三维饼图的实现代码
2008/09/28 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
vue+element UI实现树形表格
2020/12/29 Vue.js
python cookielib 登录人人网的实现代码
2012/12/19 Python
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python复制与引用用法分析
2015/04/08 Python
详解Python中with语句的用法
2015/04/15 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
营业经理岗位职责
2013/11/10 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
家长反馈意见及建议
2015/06/03 职场文书
秋收起义观后感
2015/06/11 职场文书
防溺水主题班会教案
2015/08/12 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android