js实现点击某个按钮展示或者隐藏tr一行的数据

最新推荐文章于 2022-06-23 13:59:33 发布

夏微凉秋微暖

最新推荐文章于 2022-06-23 13:59:33 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/pengbin790000/article/details/76445534

本文介绍了一个使用JSP和JavaScript实现的工程数据展示表格，该表格支持数据分页、子工程展开与折叠等功能，并提供了丰富的操作选项如删除、修改等。

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

页面样式如下：

<tbody>
			<c:forEach items="${dataList}" var="dat"  varStatus="index">
			<tr id="tr_${index.count}" openShow="0">
                	<td >${(pageNo-1)*pageSize+index.count} </td>
                    <td title="${dat['AW_NAME'] }">${dat['AW_NAME'] }
                    <c:choose>
                    	<c:when test="${my431fn:getRedisChildListSizeById(dat['AW_ID']) > 0}">
                    		<c:set var="childSize" scope="request" value="${my431fn:getRedisChildListSizeById(dat['AW_ID']).toString()}"/> 
                    		<c:set var="childList" scope="request" value="${my431fn:getRedisChildListById(dat['AW_ID'])}"/>
	                    <a id="open_${index.count}" onclick="openChildList('${index.count}')">展开</a>
                    	</c:when>
                    	<c:otherwise>
                    		<c:set var="childSize" scope="request" value="-"/>
                    	</c:otherwise>
                    </c:choose>
                    </td>
                    <td title="${dat['WORKSPACE_CODE'] }">${dat['AW_CODE'] }</td>
                    <!-- <td>-</td> -->
                    <td>${childSize}</td>
                    <td>${my431fn:getRedisUserById(dat['MOD_USER']).realname}</td>
                    <td>${dat['MOD_TIME'] }</td>
					<td>
						<a class="green" href="###"	onclick="del('${dat['AW_ID'] }')">删除</a> |
                        <a class="green" href="###" onclick="create('${dat['AW_ID'] }')">修改</a> |
                        <a class="green" href="###" onclick="createChild('${dat['AW_ID'] }','${dat['AW_NAME'] }','${dat['AW_CODE']}')">添加子工程</a> |
                        <a class="green" href="###" onclick="orderChild('${dat['AW_ID'] }','${dat['AW_NAME'] }','${dat['AW_CODE']}')">子工程排序</a> |
                        <a class="green" href="${root}/base/BaseAreaWorkSpace/initData.jspx?myId=${dat['AW_ID']}" target="_blank">初始化数据</a> |
				  	</td>
				</tr>
				<c:if test="${childSize != '-' && childSize > 0}">
					<c:forEach items="${childList}" var="cList"  varStatus="index2">
						<tr id="tr_${index.count}_${index2.count}"  style="display:none;" >
							<td style="text-align:right">${index2.count})</td>
							<td>${cList.awName}</td>
							<td>${cList.awCode}</td>
							<td>-</td>
							<td>${my431fn:getRedisUserById(cList.modUser).realname}</td>
							<td>${my431fn:formaterDate(cList.modTime)}</td>
							<td><a class="green" href="###"	onclick="delChild('${cList.id}')">删除</a> |
                        		<a class="green" href="###" onclick="create('${cList.id}')">修改</a> |
                        	</td>
						</tr>
					</c:forEach>	
				</c:if>
              </c:forEach>
            </tbody>

js代码：

//折叠显示子工程
function openChildList(index){
	//父工程
	var tr = $("#tr_"+index+"");
	var status = tr.attr("openShow");
	//子工程
	var trChild = $("tr[id^='tr_"+index+"_']");
	if(status == 0){
		tr.attr("openShow",1);
		trChild.each(function(){
			$(this).show();
			$("#open_"+index+"").text("折叠")
		})
	}else{
		tr.attr("openShow",0);
		trChild.each(function(){
			$(this).hide();
			$("#open_"+index+"").text("展开")
		})
	}
	
	
	
}