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接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
webpack3之loader全解析
Oct 26 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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写的求多项式导数的函数代码
2012/07/04 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
python基于socket实现网络广播的方法
2015/04/29 Python
django Serializer序列化使用方法详解
2018/10/16 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
python 19个值得学习的编程技巧
2020/08/15 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
小学新学期寄语
2014/04/02 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
财政局个人年终总结
2015/03/03 职场文书
安全守法证明
2015/06/23 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python