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

简介: /************************************************************************ *函 数 名: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)");
     }   
  }

目录
相关文章
|
12天前
|
前端开发
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
7月前
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
63 0
|
4天前
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
8 1
|
9月前
|
前端开发 程序员
当鼠标光标放在一张图片上,如何显示另一张图片?
当鼠标光标放在一张图片上,如何显示另一张图片?
174 1
|
C#
C#-改变表格行颜色
C#改变表格行颜色
235 0
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
93 0
布局之悬浮显示更多文本并增加箭头指示效果
改变DBGRID的选中行的颜色
默认DBGRID选中行的颜色为深蓝色,可以在程序中改变 在DBGRID的OnDrawColumnCell中写入 if (State=[gdSelectd..gdFocused,gdCurrent]) then begin    Grid.
850 0
|
C++ 索引
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(2)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等
2042 0
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(2)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(1)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等
1105 0
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(1)

热门文章

最新文章