表格隔行換色 css expression_CSS/HTML

來源:互聯網
上載者:User
第一行為其它顏色,這樣寫這個運算式
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>表格CSS測試</title><style type="text/css"><!--tr { background-color: expression(this.sectionRowIndex==0?"#AFAFAF":((this.sectionRowIndex%2==0) ? "#FFF0F0" : "#F0F0FF"));}--></style></head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"><table cellspacing="1"> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr></table><p> </p><table cellspacing="1"> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr></table><p> </p></body></html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
比較強的css
<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 )}.FindAreaTable { font-size: 12px; color: #333333; text-decoration: none; width: 1024px; cursor: hand; background-color: #FFFFFF; vertical-align: middle; text-align: center;}--></style></head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"><table cellspacing="1" class="FindAreaTable" ID="DataGrid1"> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr> <tr> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> <td>表格測試</td> </tr></table></body></html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.