datagrid样式

==============css==============
A {
 COLOR: #0066cc; TEXT-DECORATION: none
}
A:hover {
 COLOR: #FF9900; TEXT-DECORATION: underline
}
A:active {
 TEXT-DECORATION: none
}
.tbl3 {
 BACKGROUND-COLOR: #C1CDD8;
 behavior: url(datatable2.htc);
}
.tbl3 tr {
 color: #0E4279;
 BACKGROUND-COLOR: #ffffff;
}
.trHead A {
 behavior: url(trHeada2.htc);
 FONT-WEIGHT: bold;
    COLOR: #FFFFFF;
 width:100%;
 height:100%;
}
.trHead A:hover {
 COLOR: #10659E;
 TEXT-DECORATION: none;
}
.trHead TD {
 padding-top:4px;
 padding-bottom:0px;
 BACKGROUND-COLOR: #5E91DA;
 COLOR: #ffffff;
    behavior: url(trHead2.htc);
 border-bottom:2px solid #5E91DA;
}
.trSelect TD {
    color: #0E4279;
 BACKGROUND-COLOR: #F0F0F0;
}
TD {
 FONT-SIZE: 12px;
}
.btn {
 behavior: url(button2.htc);
 BORDER:#5E91DA 2px solid;
 PADDING-RIGHT: 12px;
 PADDING-LEFT: 12px;
 FONT-SIZE: 12px;
 CURSOR: hand;
 COLOR: #ffffff;
 PADDING-TOP: 2px;
 HEIGHT: 16pt;
 BACKGROUND-COLOR: #5E91DA;
}


==============datatable2.htc==============
<PUBLIC:COMPONENT>
<PUBLIC:attach  event="oncontentready" onevent="initElement()" />
<PUBLIC:attach   event="ondetach" onevent="cleanupElement()" />

<script language="VBScript">
dim fontColor
dim bgColor
dim currentRow
fontColor = "#0E4279"
bgColor = "#F3F3F3"
set currentRow = nothing

sub initElement()
 with element
  .attachEvent "onmouseover", GetRef("elementOnMouseOver")
  .attachEvent "onmouseout", GetRef("elementOnMouseOut")
 end with
end sub

sub cleanupElement()
 with element
  .detachEvent "onmouseover", GetRef("elementOnMouseOver")
  .detachEvent "onmouseout", GetRef("elementOnMouseOut")
 end with
end sub

sub elementOnMouseOver
 set el = window.event.srcElement
 do while (el.tagName <> "TR" and el.tagName <> "TABLE")
  set el = el.parentElement
 loop
 if (el.tagName <> "TR") then exit sub
 if (el.className<>"trHead" and el.className<>"trSelect") then hiliteRow el
 set el = nothing
end sub

sub elementOnMouseOut
 hiliteRow nothing
end sub

sub hiliteRow(el)
 if (not currentRow is nothing) and (el is nothing) then
  with currentRow.runtimeStyle
   .color = ""
   .backgroundColor = ""
  end with
 end if
 if not el is nothing then
  with el.runtimeStyle
  .color = fontColor
  .backgroundColor = bgColor
  end with
 end if
 set currentRow = el
end sub
</script>
</PUBLIC:COMPONENT>


==============trhead2.htc==============
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doOver()" />
   <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="doOut()"  />
   <SCRIPT LANGUAGE="JScript">
   function doOver()
   {
 if(this.childNodes.length>0)
  if(this.childNodes(0).tagName=="A")
  {
   // 鼠标移到目标上的效果
   this.runtimeStyle.backgroundColor="#FAF8F3";    // 排序td背景色
   this.runtimeStyle.borderBottomColor="#f6c456";   // 排序td下划线颜色
   this.childNodes(0).runtimeStyle.color = "#10659E";  // 排序td字符颜色
  }
   }

   function doOut()
   {
 if(this.childNodes.length>0)
  if(this.childNodes(0).tagName=="A")
  {
   // 鼠标移出目标的效果(还原)
   this.runtimeStyle.borderBottomColor="";
   this.runtimeStyle.backgroundColor="";
   this.childNodes(0).runtimeStyle.color="";
  }
   }
   </SCRIPT>
</PUBLIC:COMPONENT>



==============trheada2.htc==============
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onfocus" " ONEVENT="dofocus()" />
   <SCRIPT LANGUAGE="JScript">
   function dofocus()
   {
 this.blur();
   }
   </SCRIPT>
</PUBLIC:COMPONENT>



==============button2.htc==============
<PUBLIC:COMPONENT URN="urn:msdn-microsoft-com:workshop" >
   <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doOver()" />
   <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="doOut()"  />
   <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="doDown()" />
   <PUBLIC:ATTACH EVENT="onmouseup"  ONEVENT="doUp()"  />
   <PUBLIC:ATTACH EVENT="onfocus" " ONEVENT="dofocus()" />
   <SCRIPT LANGUAGE="JScript">
  
   var lfColor = "#7eb3fc";
   var rtColor = "#2a4377";
   var InbkColor = "#4c7fc8";
   var OutbkColor = "#5E91DA";

   function dofocus()
   {
 this.blur();
   }

   function doOver()
   {
     this.style.borderLeftColor = lfColor;
     this.style.borderRightColor = rtColor;
     this.style.borderTopColor = lfColor;
     this.style.borderBottomColor = rtColor;
     this.style.backgroundColor = InbkColor;
   }

   function doOut()
   {
     this.style.borderLeftColor = OutbkColor;
     this.style.borderRightColor = OutbkColor;
     this.style.borderTopColor = OutbkColor;
     this.style.borderBottomColor = OutbkColor;
     this.style.backgroundColor = OutbkColor;
   }
   function doDown()
   {
     this.style.borderLeftColor = rtColor;
     this.style.borderRightColor = lfColor;
     this.style.borderTopColor = rtColor;
     this.style.borderBottomColor = lfColor;
     this.style.backgroundColor = InbkColor;
   }

   function doUp()
   {
 doOver();
   }
 

   function x()
   {
 this.style.color= "#000000";
   }

   </SCRIPT>
</PUBLIC:COMPONENT>


datagrid = tbl3
datagrid 表头tr = trhead
datagrid 选择的数据行 tr = trselect