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

以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多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>  

<table>

<%int c =0;%>

//循环取列表

<%
       if (c % 2 == 0) 
       {
        className = "一种颜色";
       } else 
       {
           className = "另外一种颜色";
       }
       c++;
      %>
      <tr lcass="className">
       <td></td>
     </tr>

//循环结束

</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>  

<table>
//循环取列表
      <tr lcass="Pop_TR">
       <td></td>
     </tr>

//循环结束
</table>

 

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