Repeater控件学习之鼠标经过行变色

Repeater控件学习之鼠标经过行变色

---

在实际开发过程中为使Repeater控件更为美观,通常会使用写小技巧.其中最常用的就是鼠标经过变色的功能,下面介绍该功能的实现:

1.前台设计
<asp:Repeater ID="Rep1" runat="server">
         <HeaderTemplate>
           <table width="800px">
             <tr style="background-color:Red">
               <td style="width:160px;">学号</td>
               <td style="width:160px;">姓名</td>
               <td style="width:160px;">性别</td>
               <td style="width:160px;">年龄</td>
               <td style="width:160px;">邮箱</td>
             </tr>
         </HeaderTemplate>
         <ItemTemplate>
           <tr onmousemove="this.style.backgroundColor='#0099CC'" onmouseout="this.style.backgroundColor=''"> <!--实现了鼠标经过时变色-->
             <td><%#DataBinder.Eval(Container.DataItem,"sno") %></td>
             <td><%#DataBinder.Eval(Container.DataItem,"sname") %></td>
             <td><%#DataBinder.Eval(Container.DataItem,"sex") %></td>
             <td><%#DataBinder.Eval(Container.DataItem,"age") %></td>
             <td><%#DataBinder.Eval(Container.DataItem,"email") %></td>
           </tr>
         </ItemTemplate>
         <FooterTemplate>
           </table>
         </FooterTemplate>
       </asp:Repeater>

2.后台
public partial class MoveStyle : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Bind();
            }
        }

        protected void Bind()
        {
            SqlConnection con = new SqlConnection(Connection.connection());
            con.Open();
            SqlCommand com = new SqlCommand("select * from student", con);
            SqlDataReader dr = com.ExecuteReader();
            Rep1.DataSource = dr;
            Rep1.DataBind();
            con.Close();
            con.Dispose();
        }
    }

3.测试 看效果是不是很不错呢.举一反三,DataList控件用上述方法也可实现鼠标移至换色,这里就不一一赘述了.