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

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

目录
相关文章
|
7月前
|
前端开发
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
138 0
|
2月前
|
前端开发 JavaScript 容器
文字溢出隐藏及鼠标悬停显示效果
文字溢出隐藏及鼠标悬停显示效果
126 0
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
135 0
布局之悬浮显示更多文本并增加箭头指示效果
改变DBGRID的选中行的颜色
默认DBGRID选中行的颜色为深蓝色,可以在程序中改变 在DBGRID的OnDrawColumnCell中写入 if (State=[gdSelectd..gdFocused,gdCurrent]) then begin    Grid.
887 0
|
C++ 索引
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(2)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等
2601 0
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(2)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(1)
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等
1531 0
详解Qt5.12.9属性表控件:QtPropertyBrowser的使用示例/折叠/展开/小数位数/QSS样式/标题修改/选中行号等(1)
jqgrid 不能选中行, 每次点击单元格都自动选中第一行
最使用jqgrid表格插件写了一个功能。功能完成后显示一切正常,但是经过测试后发现,每次点击数据行时,都会自动选中第一行,无法选中其他数据行。经过一番探索,最终发现是加载进来的字段没有主键导致了这个问题。
4295 0