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实现禁止后退的方法
Dec 27 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
webpack打包非模块化js的方法
Oct 24 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python异步任务队列示例
2014/04/01 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python3实现微型的web服务器
2019/09/03 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
销售总监工作职责
2013/11/21 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
企业军训感言
2014/02/08 职场文书
军训感想500字
2014/02/20 职场文书
产品设计开发计划书
2014/05/07 职场文书
团队拓展活动方案
2014/08/28 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL