jsp中实现分层的几种常用方法

最新推荐文章于 2022-07-15 04:49:26 发布

幸运的小新粉

最新推荐文章于 2022-07-15 04:49:26 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp js 文章标签：分层

本文链接：https://blog.youkuaiyun.com/qq_41902618/article/details/81118822

jsp 同时被 2 个专栏收录

10 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍如何使用HTML和jQuery实现表格数据的隔行变色效果，并提供了具体代码实例，包括利用<c:forEach>标签遍历数据填充表格及通过jQuery为不同行设置不同背景颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、list展示，通常展示为隔行变色，<tr>标签表示html中的一行

设置背景，在tr标签中 style="background:${status.count%2==0?'gray':'white' }"

status.count 实现遍历的次数

<tbody>
    		<c:forEach items="${list }" var="info" varStatus="status">
	    		<tr style="background:${status.count%2==0?'gray':'white'}">
	    			<td>${info.bookCode }</td>
	    			<td>${info.bookType }</td>
	    			<td>${info.bookName }</td>
	    			<td>${info.createdBy }</td>
	    			<td>${info.publishPress }</td>
	    			<td colspan="2">
	    			<c:if test="${info.isBorrow == 0}">
   					<a href="" >申请借阅</a>
					</c:if>
					<c:if test="${info.isBorrow == 1}">
    				<a style="1px soild red">已借阅</a>
					</c:if>
	    			</td>
	    		</tr>
    		</c:forEach>
    		</tbody>

2、通过jQuery 实现每一行都变色（特殊情况某一行不执行，可以单独选择出这一行）

$(function() {		
	$("tr:even").css("background", "blue");
	$("tr:odd").css("background", "green");
	$("tr:last").css("background","null");
});

效果图：