jquery实现table表展开和收缩

最新推荐文章于 2021-05-31 12:25:23 发布

青人

最新推荐文章于 2021-05-31 12:25:23 发布

阅读量1.3w

点赞数

分类专栏： JQuery 文章标签： jquery table 展开收缩

本文链接：https://blog.youkuaiyun.com/fumier/article/details/42916703

版权

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery实现表格数据的显示控制。默认显示前5条记录，当记录数超过5条时提供展开按钮，点击展开可显示所有信息；点击收缩则恢复显示前5条记录。

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

前提：List表中有多条数据信息，将后台的List信息表，传给前台，先在前台显示前几条，点击<展开>，显示全部信息，点击<收缩>，只显示前几条信息。（这里面显示的是地址信息）

实现功能：在页面上先显示至少5条信息。不足5条则不显示<展开>按钮。点击<展开>显示全部信息，点击<收缩>，显示5条信息

1、前台页面

<table id="addressTable" >
<c:set var="i" value="0"></c:set>
<c:forEach var="info" items="${infoList}">
<c:set var="i" value="${i+1}"/>
<c:if test="${i<6}">
<c:if test="${i==1}">
<tr>
<td width="10%" align="right"><input type="radio" class="" name="addressradio" checked="checked"></td>
<td width="10%" align="right">${info.address.city}${info.address.area}</td>
<td width="30%" align="left">${info.address.details}${info.address.zipcode}</td>
<td width="10%" align="left">${info.personName}</td>
<td width="50%" align="left" >${info.telephone}</td>
</tr>
</c:if>
<c:if test="${i!=1}">
<tr>
<td width="10%" align="right"><input type="radio" class="" name="addressradio"></td>
<td width="10%" align="right">${info.address.city}${info.address.area}</td>
<td width="30%" align="left">${info.address.details}${info.address.zipcode}</td>
<td width="10%" align="left">${info.personName}</td>
<td width="50%" align="left" >${info.telephone}</td>
</tr>
</c:if>
</c:if>
<c:if test="${i>=6}">
<tr style="display: none;" class="changeTr">
<td width="10%" align="right"><input type="radio" class="" name="addressradio"></td>
<td width="10%" align="right">${info.address.city}${info.address.area}</td>
<td width="30%" align="left">${info.address.details}${info.address.zipcode}</td>
<td width="10%" align="left">${info.personName}</td>
<td width="50%" align="left" >${info.telephone}</td>
</tr>
</c:if>
</c:forEach>
<tr>
<c:set var="listLength" value="${listLength}"/>
<c:if test="${listLength>5}">
<td colspan="5" align="right"><input type="button" value="展开地址" id="showAllAddress"></td>
</c:if>
</tr>
</table>

2、jquery处理代码

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function()
  {
		$("#showAllAddress").click(function()
			{
			if($(this).val()=="展开地址")
				{
			      $(".changeTr").removeAttr("style");
			      $("#showAllAddress").attr("value","收缩地址");
				}
 			else
				{
				  $(".changeTr").css("display","none");
 			      $("#showAllAddress").attr("value","展开地址");
 				}
			});	
  });
</script>

3、实现图