从数据库读取一张表,显示在前台表格时,呈现隔行变色的效果
在JSP脚本中实现逻辑
<%
Connection conn = DBHelper.linkToDB();
String sql = "select * from student where 1=1 ";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
List<Student> sList = new ArrayList<Student>();
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选择器实现逻辑