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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
上班迟到检讨书
2014/01/10 职场文书
求职信需要的五点内容
2014/02/01 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
搞笑爱情保证书
2014/04/29 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
庆祝儿童节标语
2014/10/09 职场文书
会计工作检讨书
2015/02/19 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Python+Tkinter制作专属图形化界面
2022/04/01 Python