gridview行颜色渐变

最新推荐文章于 2023-12-20 09:45:12 发布

小K黑哥

最新推荐文章于 2023-12-20 09:45:12 发布

阅读量710

点赞数

分类专栏： asp.net

本文链接：https://blog.youkuaiyun.com/kdm8866/article/details/16355311

版权

asp.net 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过JavaScript为GridView、DataGrid和DataList实现鼠标滑过时的颜色变化及单击行改变背景颜色的功能。详细阐述了在不同控件中应用事件绑定的方法，包括onmouseover、onmouseout和onclick属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标滑过颜色变化：

　　gridview：

　　代码

　　1 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

　　2 {

　　3 if (e.Row.RowType == DataControlRowType.DataRow)

　　4 {

　　5 e.Row.Attributes.Add("onmouseover", "currentColor=this.style.backgroundColor;this.style.backgroundColor='#E8D098'");

　　6 e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentColor");

　　//单击行改变行背景颜色

　　e.Row.Attributes.Add("onclick","this.style.backgroundColor='颜色'; this.style.color='buttontext';this.style.cursor='default';");

　　7 }

　　8 }

　　datagird:

　　代码

　　1 protected void dgValueInfo_ItemDataBound(object sender, DataGridItemEventArgs e)

　　2 {

　　3 if (e.Item.ItemIndex != -1)

　　4 {

　　5 e.Item.Cells[0].Text = (e.Item.ItemIndex + 1).ToString();

　　6 ListItemType itemType = e.Item.ItemType;

　　7 if (itemType == ListItemType.Item)

　　8 {

　　9 e.Item.Attributes.Add("onmouseover", "e=this.style.backgroundColor; this.style.backgroundColor='#FBF9F9'");

　　10 e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=e");

　　11 }

　　12 }

　　13 }

　　datalist:

　　这个用类似上面的方式好像没有效果，所以可以考虑在页面去实现：

　　代码

　　1 <asp:DataList ID="dlMain" runat="server" >

　　2 <AlternatingItemStyle ForeColor="#ffffff" BackColor="#ECECEC" />

　　3 <HeaderTemplate>

　　4 <asp:Table ID="tabHeader" runat="server" CssClass="gridviewHead">

　　5 <asp:TableRow CssClass="Header">

　　6 <asp:TableCell CssClass="gridviewHead">序号 </asp:TableCell>

　　7 </asp:TableRow>

　　8 </asp:Table>

　　9 </HeaderTemplate>

　　10 <ItemTemplate>

　　11 <asp:Table ID="tabItem" runat="server" CssClass="GridTableTDCenter">

　　12 <asp:TableRow οnmοuseοver="currentColor=this.style.backgroundColor;this.style.backgroundColor='#FBF9F9'" οnmοuseοut="this.style.backgroundColor=currentColor>

　　13 <asp:TableCell CssClass="GridTableTDCenter"><#Container.ItemIndex+1%></asp:TableCell>

　　14 </asp:TableRow>

　　15 </asp:Table>

　　16 </ItemTemplate>

　　17 </asp:DataList>

　　或者有table,则在tr中实现....