datagrid每一行都会随着鼠标的动作改变颜色
下面文件保存为: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';")
}