您的位置:首页 > Web前端 > JavaScript

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

2017-07-31 15:47 543 查看
页面样式如下:



<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("展开")
})
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐