利用HTML组件.htc解决GridView鼠标经过及点击样式
1、.htc 文件
<public:component>
<attach event="onmouseover" handler="mouseover" />
<attach event="onmouseout" handler="mouseout" />
<attach event="onclick" handler="mouseclick" />
<script type="text/javascript">
function mouseover() {
if (this.tagName.toLowerCase() == "tr" &&
this.rowIndex > 0 &&
this.innerHTML.toLowerCase().indexOf('</th>') < 0) {
oldStyle = this.className;
this.className = "rowover";
}
}
function mouseout() {
if (this.tagName.toLowerCase() == "tr" &&
this.rowIndex > 0 &&
this.innerHTML.toLowerCase().indexOf('</th>') < 0) {
this.className = oldStyle;
}
}
function mouseclick() {
if (this.tagName.toLowerCase() == "tr" &&
this.rowIndex > 0 &&
this.innerHTML.toLowerCase().indexOf('</th>') < 0) {
if (selectedRow && selectedRow.rowIndex == this.rowIndex) {
return;
}
if (selectedRow && prevStyle) {
selectedRow.className = prevStyle;
}
prevStyle = oldStyle;
selectedRow = this;
this.className = "rowselected";
oldStyle = this.className;
}
}
</script>
</public:component>
2、在css样式中引用
.list table
{
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
.list tr
{
behavior: url(../Css/list.htc);
}
.list th
{
height: 22px;
border-right: solid 1px #c1c1c1;
border-bottom: solid 1px #c1c1c1;
background: url(../Img/thbg.jpg);
padding-top: 3px;
}
.list td
{
height: 20px;
border-right: solid 1px #c1c1c1;
border-bottom: solid 1px #c1c1c1;
padding-left: 2px;
vertical-align: middle;
text-align: left;
padding-top: 3px;
}
.list a
{
color: #000033;
}
.rowover
{
background: #d7fcd5;
}
.rowover td
{
color: #08a200;
}
.rowselected
{
background: #C8EBF3;
}
.row1
{
background: #ffffff;
}
.row2
{
background: #F7FAF7;
}
3、设置GridView的css
CssClass="list" RowStyle-CssClass="row1" AlternatingRowStyle-CssClass="row2"
SelectedRowStyle-CssClass="rowselected"
