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

复制代码 代码如下:

<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>
 

时间： 2024-08-31 23:44:25

javascript修改表格背景色实例代码分享_javascript技巧的相关文章

javascript数字验证的实例代码(推荐)_javascript技巧

现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

Bootstrap下拉菜单效果实例代码分享_javascript技巧

下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种.  Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站.  对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释.  而且,官方网站的超级链接代码杂糅着许多没有用的参数.

JavaScript计算器网页版实现代码分享_javascript技巧

JavaScript网页计算器代码,该计算器是用DW写的!HTML篇 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <link href="style/calculator.css" rel="stylesheet&quo

Javascript模拟加速运动与减速运动代码分享_javascript技巧

加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离,如xxx.style.left或xxx.style.marginLeft,然后每次运动后都使速度增加,这样加速运动的效果就出现了,减速运动是同样的道理. 下面是两个示例: 加速运动 复制代码 代码如下: <!DOCTYPE html> <html> <head&g

javascript实现汉字转拼音代码分享_javascript技巧

js代码 function arraySearch(l1,l2){ for (var name in PinYin){ if (PinYin[name].indexOf(l1)!=-1) { return name; break; } } return false; } 核心代码: var PinYin = {"a":"\u554a\u963f\u9515","ai":"\u57c3\u6328\u54ce\u5509\u54c0\u7

JavaScript实现的图像模糊算法代码分享_javascript技巧

项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现?1.createImageData()2.getImageData()3.putImageData()以上3个函数即可实现,用法和奥义,自己百度吧,我就不重复叙述了,没多大的意义. 以下是实现模糊算法的JS,其实还有种2B级算法就是分布矩阵,这样效率提高很多倍,不过效果很差,羽化的效果不强.实现代码: 复制代码 代码如下: var mul_table = [        512,512,456

JavaScript中实现map功能代码分享_javascript技巧

/*   * MAP对象,实现MAP功能   *   * 接口:   * size()     获取MAP元素个数   * isEmpty()    判断MAP是否为空   * clear()     删除MAP所有元素   * put(key, value)   向MAP中增加元素(key, value)    * remove(key)    删除指定KEY的元素,成功返回True,失败返回False   * get(key)    获取指定KEY的元素值VALUE,失败返回NULL   *

js实现弹窗插件功能实例代码分享_javascript技巧

目前测试下:支持IE6+ 火狐 谷歌游览器等. 先来看看此组件的基本配置项:如下: 复制代码 代码如下: this.config = {  targetCls   :   '.clickElem',   // 点击元素 title:  '我是龙恩',      // 窗口标题 content     :  'text:<p style="width:100px;height:100px">我是龙</p>', //content            :  'im

Javascript常用字符串判断函数代码分享_javascript技巧

具体的解释查看注释吧,这里就不多废话了,直接上代码: 复制代码 代码如下: /* function obj$(id)                      根据id得到对象  function val$(id)                      根据id得到对象的值  function trim(str)                      删除左边和右边空格  function ltrim(str)                    删除左边空格  function rt