现在的位置: 首页 > 综合 > 正文

datagrid每一行都会随着鼠标的动作改变颜色

2012年05月22日 ⁄ 综合 ⁄ 共 1396字 ⁄ 字号 评论关闭

  
下面文件保存为:TR.HTC
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH event="onmouseout" handler="swapEffect" />
<PUBLIC:ATTACH event="onmouseover" handler="swapEffect" />
<SCRIPT>
 var temp_Color
             temp_Color = element.style.backgroundColor
function swapEffect() {

 switch (event.type) {

  case "mouseout":
    if(element.style.backgroundColor=="#dbeaf5")
     element.style.backgroundColor=temp_Color;
    break;
  case "mouseover":
    if(element.style.backgroundColor==temp_Color)
     element.style.backgroundColor="#dbeaf5";
    break;
 }
}
</SCRIPT>
</PUBLIC:COMPONENT>

下面的文件保存为:TD.HTC

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH event="onmouseover" handler="swapEffect" />
<PUBLIC:ATTACH event="onmouseout" handler="swapEffect" />
<SCRIPT>
function swapEffect() {
 switch (event.type) {
  case "mouseover":
    element.borderColorDark="#808080";
    element.borderColorLight="#ffffff";
    break;
  case "mouseout":
    element.borderColorDark="#ffffff";
    element.borderColorLight="#808080";
    break;
 }
}
</SCRIPT>
</PUBLIC:COMPONENT>

你使用的CSS样式表中加入:
tr
{
 behavior:url(tr.htc);
}
td
{
 font-size:12px;
 behavior:url(td.htc);
}

注意的是路径!
你在页面中加入样式表和表格看看效果,你再根据上边的改改颜色就可以达到效果了

  private void dataTable_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   e.Item.Attributes.Add("onmousemove", "if(this.rowIndex>1){this.style.backgroundColor='#e7e7ff';this.style.cursor='hand';}")
   e.Item.Attributes.Add("onmouseout", "if(this.rowIndex>1)this.style.backgroundColor='#ffffff';")
  }

 

 

 

抱歉!评论已关闭.