javascript修改表格背景色实例代码分享


Posted in Javascript onDecember 10, 2013
<html> 
<script> 
//点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 
function selectRow(target) 
{ 
     var sTable = document.getElementById("ServiceListTable") 
     for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 
     { 
         if (sTable.rows[i] != target) //判断是否当前选定行 
         { 
             sTable.rows[i].bgColor = "#ffffff"; //设置背景色 
             sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
             sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
         } 
         else 
         { 
             sTable.rows[i].bgColor = "#d3d3d3"; 
             sTable.rows[i].onmouseover = ""; //去除鼠标事件 
             sTable.rows[i].onmouseout = ""; //去除鼠标事件 
         } 
     } 
} 
//移过时tr的背景色 
function rowOver(target) 
{ 
    target.bgColor='#e4e4e4'; 
} 
//移出时tr的背景色 
function rowOut(target) 
{ 
    target.bgColor='#ffffff'; 
} 
//恢复tr的的onmouseover事件配套调用函数 
function resumeRowOver() 
{ 
    rowOver(this); 
} 
//恢复tr的的onmouseout事件配套调用函数 
function resumeRowOut() 
{ 
    rowOut(this); 
} 
</script> 
<body> 
<div style="width:50px;height:50px;background-color:Blue" onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js给页面元素添加事件对应的表格HTMLview plaincopy to clipboardprint? 
</div> 
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable">  
<tr>  
<th>服务事项</th>  
<th>N</th>  
<th>状态</th>  
<th>办结</th>  
<th>资料</th>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>相关内容</td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
<td align="center"> </td>  
</tr>  
</table>  
</body> 
</html>
 
Javascript 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
jQuery select操作控制方法小结
May 26 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
jQuery中的select操作详解
Nov 29 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 #Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
javascript 数字格式化输出的实现代码
Dec 10 #Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 #Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 #Javascript
浅析jQuery1.8的几个小变化
Dec 10 #Javascript
Javascript中各种trim的实现详细解析
Dec 10 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python实现随机漫步算法
2018/08/27 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python 如何调用 dubbo 接口
2020/09/24 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
预备党员表决心书
2014/03/11 职场文书
教师教学评估方案
2014/05/09 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
怎样写离婚协议书
2015/01/26 职场文书