在ASP.NET中实现鼠标移动悬停在DataGrid时高亮显示这一行的方法

原创 2007年09月23日 13:12:00
 

HTML Tags and JavaScript tutorial



在ASP.NET中实现鼠标移动悬停在DataGrid时高亮显示这一行的方法




首先在WebFrom页面中添加JavaScript 代码块
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
 1
<
script
>
 2
        
//
鼠标移动时高亮显示所悬停的行
 3
        
function
 SetDataGridBackColor(color,isMouseOut)
 4
        
{
 5
            
var
 tr
=
event.srcElement.parentElement;
 6
            
 7
            
var
 iRowIndex 
=
 tr.rowIndex ;
 8
            
if
( isMouseOut )
 9
            
{
10
                
if
( ( iRowIndex 
%
 
2
 ) 
==
 
1
 )
11
                
{
12
                    tr.style.backgroundColor 
=
 color;
13
                }
14
                
else
15
                
{
16
                    tr.style.backgroundColor 
=
 
"
#EAE9D7
"
;
17
                }
18
            }
19
            
else
20
            
{
21
                tr.style.backgroundColor 
=
 color;
22
            }
23
        }
24
        
</
script
>
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
//鼠标移动时高亮显示所悬停的行function SetDataGridBackColor(color,isMouseOut){var tr=event.srcElement.parentElement;var iRowIndex = tr.rowIndex ;if( isMouseOut ){if( ( iRowIndex % 2 ) == 1 ){tr.style.backgroundColor = color;}else{tr.style.backgroundColor = "#EAE9D7";}}else{tr.style.backgroundColor = color;}}
然后在aspx文件中的DataGrid事件中去注册这个脚本
    
private
 
void
 dgTemp_PreRender(
object
 sender, System.EventArgs e)
        
{
            
for
 (
int
 i 
=
 
0
 ; i 
<
 dgTemp.Items.Count; i
++
)
            
{
                dgTemp.Items[i].Attributes.Add(
"
onmouseover
"
,
"
SetDataGridBackColor('LightBlue',false);
"
);
                dgTemp.Items[i].Attributes.Add(
"
onmouseout
"
,
"
SetDataGridBackColor('white',true);
"
);
            }
        }
为了防止DataGrid标头的滚动,可以在增加这么一个脚本
        
private
 
void
 dgTemp_ItemCreated(
object
 sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
        
{
            
//
使DataGrid标头不滚动
            
if
 (e.Item.ItemType 
==
 ListItemType.Header)
            
{
                e.Item.Style.Add(
"
position
"
,
"
relative;top:expression(document.all['dgBHGJBSZ'].offsetParent.scrollTop);
"
);
            }
        }
链接地址:
http://Arthur1999.cnblogs.com/archive/2006/07/14/450487.html
 


双击dataGridView一行数据,打开一个另一个窗体,并把双击行的数据展示出来

本文是以list为数据源,双击获取一个list实例,并把这个实例传到另一个窗体,并把所得实例的数据展示出来。 //  frmEmployeeList.cs //dataGridView1双击事件C...
  • java18237100493
  • java18237100493
  • 2017年11月26日 17:10
  • 144

ASP.NET中怎样在DataGrid中选中一行后将选中行换一个颜色(转)

您可以使用DataGrid的SelectedItemStyle属性来设置被选中行的属性,如背景色等。具体用法请参阅MSDN中的一个示例: DataGrid.SelectedItemStyle Prop...
  • bh812
  • bh812
  • 2007年01月27日 16:54
  • 1617

DataGrid:鼠标移动行变色、单击行弹出提示窗体

此代码实现了以下功能:  1.当鼠标在DataGrid上移动时行变化背景色;  2.单击DataGrid行弹出提示窗体;  3.当鼠标放在DataGrid上时鼠标样式变为"hand"样式。  在Dat...
  • caitou_upc
  • caitou_upc
  • 2007年03月16日 16:30
  • 445

jquery隔行换色和鼠标移动、离开当前行颜色变化

jquery隔行换色   table,tr,td{border:1px solid blue;color:red;text-align:left;font-size:24px}   tbo...
  • zhenlai2012
  • zhenlai2012
  • 2013年01月16日 22:49
  • 3080

主题:怎样在Datagrid控件中实现插入一行啊,而不是在最后自动增加一行

    ...
  • xiaofeixia__9999
  • xiaofeixia__9999
  • 2006年03月28日 11:15
  • 1655

高亮显示datagrid中鼠标选中的行

用于实现高亮显示datagrid中鼠标选中的行,当在datagrid的内容较多的时候,此段程序方便用户的查看。  var backcol  var currcol = "#ffff99"  funct...
  • goodhy
  • goodhy
  • 2004年11月27日 12:54
  • 1244

ASP.NET DATAGRID中如何点击整列或模板列后弹出窗口并选中新窗口数据将值返回给模板列中的文本框

一个页面WEB!,里面有个DATAGRID, DATAGRID显示数据库中内容,双击DATAGRID上的一行(或DATAGRID的文本框),打开一个新窗口WEB2,要求新窗口WEB2中的TEXTBOX...
  • guoguo19811025
  • guoguo19811025
  • 2005年07月28日 21:41
  • 1769

隐藏Datagrid中的固定行

最近要为一德国客户,做个 将Excel产品数据,导入DataGrid,再进入数据的功能在导的过程中我想,客户每导完一条记录,就将把Excel中的记录给删除了或者隐藏了.以免客户重新导入的过程 用这样的...
  • lzid2008
  • lzid2008
  • 2007年07月06日 12:01
  • 904

鼠标移动,改变DataGrid颜色

Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridIte...
  • 21aspnet
  • 21aspnet
  • 2004年10月24日 22:45
  • 1949

EasyUI datagrid获取一行数据

EasyUI datagrid获取表格中被选中的数据 var row = $('#target').datagrid('getSelected'); 也可以获取所有被选中的行:...
  • u010009900
  • u010009900
  • 2014年01月17日 18:33
  • 4963
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在ASP.NET中实现鼠标移动悬停在DataGrid时高亮显示这一行的方法
举报原因:
原因补充:

(最多只允许输入30个字)