隔行换色



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");
});

原文地址:https://www.cnblogs.com/fifiyong/p/6123280.html