I have a gridview with the alternatingRowStyle property set.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource2" O开发者_JS百科nRowDataBound="GridView1_RowDataBound"
onselectedindexchanged="GridView1_SelectedIndexChanged" AlternatingRowStyle-BackColor="#f0f1f3">
I also want to highlight rows as the cursor moves over with this:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ceedfc'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");
e.Row.Attributes.Add("style", "cursor:pointer;");
The problem I'm having is that when the mouse moves past the row, it is being restored to white, not the previous color, which is different in half the rows. I supposed I could save the current rowcolor before replacing it for each "onmouseove" event, but that seems expensive and worrisome if fast mouse movement could mess things up.
I don't see a property for gridview rows to tell me if it is alternate row but would a simple odd/even determination on the rowindex be best here?
Any better suggestions?
Thanks.
-Dan
Store the original style. Then set the styles backgroundColor to this.originalstyle
.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#ceedfc'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle");
e.Row.Attributes.Add("style", "cursor:pointer;");
I prefer using CSS for hover color
tr.odd {
background-color: White;
}
tr.even {
background-color: #f8f8f8;
}
tr.odd:hover {
background-color: #f3fcfa;
}
tr.even:hover {
background-color: #ebf3f1;
}
Using JQuery:
$(document).ready(function ()
{
var original = "";
$("#<%=yourGridViewNameHere.ClientID%> tr:has(td)").hover(function ()
{
original = $(this).css("background-color");
$(this).css("background-color", "Pink");
}, function ()
{
$(this).css("background-color", original);
});
});
The original answer I got from here, I just tweaked it a bit for my needs as seen above.
Enjoy
精彩评论