看到老外的blog,说asp.net 2.0下的gridview中,当用户在gridview中用鼠标从上到下扫描各行时,起到加亮显示每次移动过的行的一个效果,
用javascript写的,还算简单,记录之
<asp:repeater id="rptrProducts" runat="server">
<HeaderTemplate>
<div><table BorderColor="Silver" border="0" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Id</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Name</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">UnitPrice</font></STRONG>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id='<%#DataBinder.Eval(Container.DataItem, "ProductID")%>'
onclick='javascript:Repeater_selectRow(this, "<%#DataBinder.Eval(Container.DataItem, "ProductID")%>",true);'
onmouseover='javascript:Repeater_mouseHover(this);' >
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductID")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductName")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "UnitPrice")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table></div>
</FooterTemplate>
</asp:repeater>
之后用个隐藏域来记录每行的ID,以方便在服务端调用
<INPUT id="hdnProductID" type="hidden" value="0" runat="server" NAME="hdnProductID">
然后是javascript实现CSS效果
用javascript写的,还算简单,记录之
<asp:repeater id="rptrProducts" runat="server">
<HeaderTemplate>
<div><table BorderColor="Silver" border="0" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Id</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Name</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">UnitPrice</font></STRONG>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id='<%#DataBinder.Eval(Container.DataItem, "ProductID")%>'
onclick='javascript:Repeater_selectRow(this, "<%#DataBinder.Eval(Container.DataItem, "ProductID")%>",true);'
onmouseover='javascript:Repeater_mouseHover(this);' >
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductID")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductName")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "UnitPrice")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table></div>
</FooterTemplate>
</asp:repeater>
之后用个隐藏域来记录每行的ID,以方便在服务端调用
<INPUT id="hdnProductID" type="hidden" value="0" runat="server" NAME="hdnProductID">
然后是javascript实现CSS效果
function Repeater_selectRow(row, ProductId) { var hdn=document.Form1.hdnProductID; hdn.value = ProductId; if (lastRowSelected != row) { if (lastRowSelected != null) { lastRowSelected.style.backgroundColor = originalColor; lastRowSelected.style.color = 'Black' lastRowSelected.style.fontWeight = 'normal'; } originalColor = row.style.backgroundColor row.style.backgroundColor = 'BLACK' row.style.color = 'White' row.style.fontWeight = 'normal' lastRowSelected = row; } }function Repeater_mouseHover(row) { row.style.cursor = 'hand'; }