<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 双色表格CSS实例 </ title >
< style type ="text/css" > ...
#DataGrid1 tr {...}{
background-color: expression(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
(this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF" //奇偶显示不同的颜色
)
);
color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : ""); //控制第一行颜色
font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : ""); //如果是第一行则,设为粗体
TableSelect: expression(
this.sectionRowIndex == 0 ? "" :
(
//鼠标移入对象
onmouseover = function()
{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
},
//鼠标移出对象
onmouseout = function()
{...}{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
)
}
#DataGrid1 td {...}{
background-color:expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: null
)
}
//table的位置
.FindAreaTable1 {...}{
font-size: 12px;
color: #333333;
text-decoration: none;
width: 80%;
cursor: hand;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
}
</ style >
</ head >
< body >
< table cellspacing ="1" class ="FindAreaTable1" ID ="DataGrid1" >
< tr >
< td > 首行首列 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
</ tr >
< tr >
< td > 行1首列 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
</ tr >
< tr >
< td > 行2首列 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
</ tr >
< tr >
< td > 行3首列 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
</ tr >
< tr >
< td > 行4首列 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
</ tr >
< tr >
< td > 行5首列 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
</ tr >
</ table >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 双色表格CSS实例 </ title >
< style type ="text/css" > ...
#DataGrid1 tr {...}{
background-color: expression(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
(this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF" //奇偶显示不同的颜色
)
);
color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : ""); //控制第一行颜色
font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : ""); //如果是第一行则,设为粗体
TableSelect: expression(
this.sectionRowIndex == 0 ? "" :
(
//鼠标移入对象
onmouseover = function()
{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
},
//鼠标移出对象
onmouseout = function()
{...}{
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
)
}
#DataGrid1 td {...}{
background-color:expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: null
)
}
//table的位置
.FindAreaTable1 {...}{
font-size: 12px;
color: #333333;
text-decoration: none;
width: 80%;
cursor: hand;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
}
</ style >
</ head >
< body >
< table cellspacing ="1" class ="FindAreaTable1" ID ="DataGrid1" >
< tr >
< td > 首行首列 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
< td > 首行 </ td >
</ tr >
< tr >
< td > 行1首列 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
< td > 行1 </ td >
</ tr >
< tr >
< td > 行2首列 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
< td > 行2 </ td >
</ tr >
< tr >
< td > 行3首列 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
< td > 行3 </ td >
</ tr >
< tr >
< td > 行4首列 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
< td > 行4 </ td >
</ tr >
< tr >
< td > 行5首列 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
< td > 行5 </ td >
</ tr >
</ table >
</ body >
</ html >