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:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
javascript的函数作用域
Nov 12 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
jquery分割字符串的方法
Jun 24 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 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
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php 文章调用类代码
2011/08/11 PHP
php中session退出登陆问题
2014/02/27 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python爬取个性签名的方法
2018/06/17 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python多进程并发demo实例解析
2019/12/13 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
应届行政管理专业个人自我评价
2013/12/28 职场文书
手机被没收的检讨书
2014/10/04 职场文书
大班下学期个人总结
2015/02/13 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书