鼠标指向表格中的一行时,该行背景色改变;点击行时,突出显示标记颜色

简介: /************************************************************************ *函 数 名:ChangeRowBg(row) *功能描述:鼠标指向表格中的一行时,该行背景色改变,点击行时,突出显示标记颜色 *注:1.

<html>
<head>
<script language=javascript>
/************************************************************************
 *函 数 名:ChangeRowBg(row)
 *功能描述:鼠标指向表格中的一行时,该行背景色改变,点击行时,突出显示标记颜色
 *注:1.在tr中添加事件:onmouseover,onmouseout,onmousedown
 *   2.在tr中如有下载链接(如下载Word文档),请将target设为_blank,否则可能出js错
 *入    参:row--tr对象
 *创 建 人:夏春涛 xchuntao@163.com qq:23106676
 *创建时间:2005-07-01
 ************************************************************************/
  //全局变量
  var OldRowBgColor;
  var NewRowBgColor  = "#b5c5e6"; //用小写
  var MarkRowBgColor = "#ff9933"; //用小写
  function ChangeRowBg(row)
  {
 if (event.type=='mouseover')
 { 
  /*
  RowBgColor = event.srcElement.parentElement.bgColor;   
  event.srcElement.parentElement.bgColor = "#b5c5e6";
  */
  /*
  RowBgColor = event.srcElement.parentElement.style.backgroundColor 
  event.srcElement.parentElement.style.backgroundColor = "#b5e5e6";
  */
  OldRowBgColor = row.style.backgroundColor  
  row.style.backgroundColor = NewRowBgColor

 }
 else if (event.type=='mouseout')
 {
     row.style.backgroundColor = OldRowBgColor;
 }
 else if (event.type=='mousedown')
 {
  if (row.style.backgroundColor != MarkRowBgColor)
  {
   row.style.backgroundColor = MarkRowBgColor;
   row.onmouseout = function(){return false;}
   row.onmouseover= function(){return false;}
     }
     else
     {
   row.style.backgroundColor = NewRowBgColor ;
   row.onmouseout = function(){ ChangeRowBg(row);}
   row.onmouseover= function(){ ChangeRowBg(row);}
     }
 }
  }
</script>
</head>
<body>
<table align=center width=500 bgcolor="#669999" border=1 cellspacing=0>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a target=_blank href="new.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a target=_blank href="new.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a target=_blank href="new.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a target=_blank href="new.htm">TestLink</td>
</tr>
<tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
<td>TestData</td>
<td><a target=_blank href="new.htm">TestLink</td>
</tr>
</table>
</body>
</html>
//--------在asp.net中的应用(对Datagrid利用如下函数进行初始化):--------

public void ChangeRowBg(DataGrid grdTable)
  {   
     for(int i=0;i<grdTable.Items.Count;i++)
     {
       grdTable.Items[i].Attributes.Add("onmouseover","ChangeRowBg(this)");
       grdTable.Items[i].Attributes.Add("onmouseout","ChangeRowBg(this)");
       grdTable.Items[i].Attributes.Add("onmousedown","ChangeRowBg(this)");
     }   
  }

目录
相关文章
|
6月前
|
前端开发
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
127 0
|
26天前
|
前端开发 JavaScript 容器
文字溢出隐藏及鼠标悬停显示效果
文字溢出隐藏及鼠标悬停显示效果
66 0
|
4月前
|
JavaScript
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
Elementplus淡入淡出效果,头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换,侧边栏如何添加阴影,右边如何设置高度,侧边栏如何设置阴影,如何让icon与文字
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
|
6月前
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
85 1
|
前端开发 程序员
当鼠标光标放在一张图片上,如何显示另一张图片?
当鼠标光标放在一张图片上,如何显示另一张图片?
264 1
|
C#
C#-改变表格行颜色
C#改变表格行颜色
300 0
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
125 0
布局之悬浮显示更多文本并增加箭头指示效果