隔行变色的几种实现方式：JSP脚本 / JS样式控制 / EL+JSTL标签化 / jquery奇偶选择器

• 从数据库读取一张表，显示在前台表格时，呈现隔行变色的效果
  

• 在JSP脚本中实现逻辑

<%
    Connection conn = DBHelper.linkToDB();
    String sql = "select * from student where 1=1 ";
    PreparedStatement ps = conn.prepareStatement(sql);
    ResultSet rs = ps.executeQuery();
    List sList = new ArrayList();
    while(rs.next()){
        int id = rs.getInt(1);
        String name = rs.getString(2);
        int age = rs.getInt(3);
        float score = rs.getFloat(4);
        sList.add(new Student(id,name,age,score));
    }
    for(int i = 0; i < sList.size();i++){
        Student s = sList.get(i);
        if(i % 2 == 0){
 %>     
    <ul style="background-color:yellow">
        <li><%=s.getId() %>li>
        <li><%=s.getName() %>li>
        <li><%=s.getAge() %>li>
        <li><%=s.getScore() %>li>
    ul>
<%}else{%>  
    <ul style="background-color:lightgreen">
        <li><%=s.getId() %>li>
        <li><%=s.getName() %>li>
        <li><%=s.getAge() %>li>
        <li><%=s.getScore() %>li>
    ul>
<%} } %>

• 在js脚本中实现逻辑

<script type="text/javascript">
function getElementsByCls(clsName){
    var rArr = new Array();
    var allTags = document.getElementsByTagName("*");
    for(var i = 0; i < allTags.length;i++){
        if(allTags[i].className == clsName)
            rArr.push(allTags[i])
    }
    return rArr;
}
window.onload=function(){
    var rows = getElementsByCls("row");
    for(var i = 0; i < rows.length; i++){
        if(i % 2 == 0){
            rows[i].style.cssText = "background-color:yellow;";
        }else{
            rows[i].style.cssText = "background-color:lightgreen;";
        }
    }
}
script>

• 在EL+JSTL标签中实现逻辑

<c:forEach items="${sList }" var="li" varStatus="status">
    <c:if test="${status.index mod 2 eq 0 }">
        <ul style="background-color:yellow;">
            <li>${li.id }li>
            <li>${li.name }li>
            <li>${li.age }li>
            <li>${li.score }li>
        ul>
    c:if>
    <c:if test="${status.index mod 2 ne 0 }">
        <ul style="background-color:lightgreen;">
            <li>${li.id }li>
            <li>${li.name }li>
            <li>${li.age }li>
            <li>${li.score }li>
        ul>
    c:if>
c:forEach>

• 用jquery的even / odd选择器实现逻辑