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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
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
使用Apache的rewrite技术
2006/06/22 PHP
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
小班下学期幼儿评语
2014/12/30 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
教师个人发展总结
2015/02/11 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
使用Redis做预定库存缓存功能
2022/04/02 Redis
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL