代码改变世界

一个用CSS实现隔行变色的技术

2011-03-24 10:30  myjava2  阅读(430)  评论(0)  编辑  收藏  举报

以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多java脚本判断，写了许多像下面的例子。

Html代码 复制代码 收藏代码
  1. <table>
  2.   
  3. <%int c =0;%>  
  4.   
  5. //循环取列表   
  6.   
  7. <%   
  8.        if (c % 2 == 0)    
  9.        {   
  10.         className = "一种颜色";   
  11.        } else    
  12.        {   
  13.            className = "另外一种颜色";   
  14.        }   
  15.        c++;   
  16.       %>  
  17.       <tr lcass="className">  
  18.        <td></td> 
  19.   
  20.      </tr>  
  21.   
  22. //循环结束   
  23.   
  24. </table>  

 

某一天才发现有如下的方法，可以直接在css中写：

.Pop_TR{
 background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色");
 cursor:hand;
}

 这样，想展示上面的样式，只需要这样写：

Html代码 复制代码 收藏代码
  1. <table>  
  2. //循环取列表   
  3.       <tr lcass="Pop_TR">  
  4.        <td></td>  
  5.   
  6.      </tr>  
  7.   
  8. //循环结束   
  9. </table>  

 

这样一来，的确减少了不少代码，jsp中也不需要写那些丑陋的java脚本了。css技术，还真要下一番功夫去研究。