隔行換色

1.這是在直接在jsp頁面中使用java代碼
<%    
    //每頁顯示的新聞列表
    List<News> newsList=newsService.getPageNewsList(pageIndex,pageSize);
    int i=0;
    for(News news:newsList){
        i++;
    }
%>


    <tr<%if(i%2!=0){%>class="admin-list-td-h2<%}%>">
        <td><%=news.getAuthor()%></td>
        <td><%=news.getCreateDate()%></td>





2.使用JSTL與EL表達式隔行換色 
        主要看紅色字體部分
    <c:forEach var="news" items="${list }" varStatus="status" >
        <tr <c:if test="${status.count%2==0 }">class="admin-list-td-h2"</c:if>>   <td>
            <a href='newsDetailView.jsp?id=${news.id }'><c:out value="${news.title }" escapeXml="true" /></a>
        </td>
        <td>
            <c:out value="${news.author }" default="無" />
        </td>
        <td>
            <fmt:formatDate value="${news.createDate }" pattern="yyyy-MM-dd"/>
        </td>
        <td>
            <a href='<c:url value="adminNewsEdit.jsp">
                            <c:param name="id" value="${news.id }"></c:param>
                        </c:url>
                    '>修改</a>
                    <a href="javascript:if(confirm('確認是否刪除此新聞？')) location='adminNewsDel.jsp?id=2'">刪除</a>
        </td>
        </tr>
    </c:f>



3.使用javaScript編寫隔行換色

window.onload=function(){
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
　　if(i%2==0&&i!=0){
　　　　rows[i].style.backgroundColor="#eee";
}
}


4.使用jQuery編寫隔行變色

$(document).ready(function(){
　　//查找偶數的tr不要第一行，然后改變樣式
　　$("tr:even").not(":first").css("background-color","#eee");
});