总结几个利用css中的expression对象实现的效果

         expression是优点和缺点都很明显的一个对象，因为它不被非IE的浏览器支持所有在网站开发中没有什么市场，但是如果你所开发的项目没有兼容其它浏览器的要求（比如我们公司开发的软件向来只考虑IE，毕竟是软件嘛，我们开发完的操作说明就可以写死“运行在IE环境下”），那么它还有很有必要了解一下儿的！
　　概念性的东西不讲了，你只需知道它是一个可以把javascript加入到CSS中的一个对象就OK了，近来在公司中总是在考虑软件的布局，目的是在公司的项目中全面引用div+css的布局方式，以求使程序员在开发系统时能够做到完全不考虑页面而只需要尊守基本的页面结构而已，今天说说在列表中运用expression来实现在一些常用的效果吧！这样子大家有以后不管是使用VS2003中的DataGrid还是VS2005中的GridView的时候都可以利用CSS对其实现一些常用的效果！当然以下的代码只能在IE环境下才有效！
　　第一个：交替变换的行背景色：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< html >  
  < head >  
  < title ></ title >  
  < style > ...  
 body{...}{} 
 .testGrid{...}{} 
 .testGrid tr{...}{font-size:12px;height:23px;background:expression('#eee,#ddd'.split(',')[rowIndex%2]); 
  </ style >  
  </ head >  
  < body >  
  < table  width ="80%"  class ="testGrid"  cellpadding ="0"  cellspacing ="0" >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >< td ></ td >  
  </ tr >  
  </ table >  
  </ body >  
</ html >  

　　第二个：鼠标移动变色，并且点击选中和取消选中项:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< html >  
  < head >  
  < title ></ title >  
  < style >  
 body {}  
 .testGrid { border-collapse :  collapse ; background : WhiteSmoke ; }  
 .selected { background : Burlywood ; color : #fff ; }  
 .over { background : Bisque ; }  
 .testGrid td { border : #f4a460 1px solid ; padding : 5px ; }  
 .testGrid tr { font-size : 12px ;  
 obj :  expression(οnclick=function (){if(this.className=='selected'){this.className='' ; } else { this.className='selected' } ;for(var i=0;i<this.parentNode.childNodes.length;i++) { if(this.parentNode.childNodes[i]!=this){this.parentNode.childNodes[i].className=''; } }},οnmοuseοver=function () { if(this.className!="selected"){this.className="over";this.title='单击选中此项' } else { this.title='单击取消选中' } },οnmοuseοut=function () { if(this.className!="selected"){this.className=""; } }); 
 } 
 
  </ style >  
  </ head >  
  < body >  
  < table  width ="80%"  class ="testGrid"  cellpadding ="0"  cellspacing ="0" >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  </ table >  
  </ body >  
</ html >  

         第三个：交替使用的行背景图片：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< html >  
  < head >  
  < title ></ title >  
  < style >  
 body {}  
 .testGrid { border-collapse :  collapse ; background : WhiteSmoke ; }  
 .selected { background : Burlywood ; color : #fff ; }  
 .over { background : Bisque ; }  
 .testGrid td { border : #f4a460 1px solid ; padding : 5px ; padding : 30px 0 0 0 ; height : 70px ; text-align : center ; }  
 .testGrid tr { font-size : 12px ;  
 background : expression('url(http://www.zj-blog.com/temp/images/f'+(rowIndex%3+1)+'.gif) top center no-repeat') ;  
 
  }  
 
  </ style >  
  </ head >  
  < body >  
  < table  width ="70px"  class ="testGrid"  cellpadding ="0"  cellspacing ="0" >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  < tr >  
  < td > 测试内容 </ td >  
  </ tr >  
  </ table >  
  </ body >  
</ html >