在 JSP 中創建可折疊表
[英]Creating a Collapsible table in JSP
問題描述
JSP 代碼：
<c:forEach var="map" items="${map}">
<tr>
<td>
<table border="1">
<tr class="header expand">
<th>${map.key.id}</th><th>${map.key.name}</th><th>${map.key.status}<span class="sign"></span></th>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<th>REQUEST_ID</th>
<th>LOGIN_USER</th>
<th>PRICE</th>
<th>STATUS</th>
</tr>
<c:forEach var="item" items="${map.value}">
<tr>
<td>${item.REQUEST_ID}</td><td>${item.LOGIN_USER}</td><td>${item.PRICE}</td><td>${item.STATUS}</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</c:forEach>
折疊表代碼：
<style type="text/css">
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
tr.header
{
cursor:pointer;
}
.header .sign:after{
content:"+";
display:inline-block;
}
.header.expand .sign:after{
content:"-";
}
</style>
<body>
<table border="0">
<tr class="header expand">
<th colspan="2">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
<script type="text/javascript">
$('.header').click(function(){
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
</script>
</body>
我有一個 map，它正在 JSP 中檢索。 It has object as key and arraylist as values.The arraylist consists of rows as objects.For a particular key which has unique reqid,it has all rows specific to the reqid as objects in the arraylist. 我想在 JSP 中檢索它。 It must be collapsible table in such a way that key is my header and values ie rows related to reqid must be present under that header.I have independent JavaScript code to implement it.I tried adding up in JSP but there is no outcome on browser .我需要幫助設計 JSP 代碼中的可折疊表。
預期 Output：
123 A 1 ///Table header
123 A 5 2
123 A 10 3
//N no of rows
456 B 2 ///Table header
456 B 20 3
456 B 25 2
//N no of rows
1 個解決方案
解決方案1
1 已采納 2020-06-01 13:02:12
您的 jquery 代碼正在運行，但您的表格structure錯誤。其中有許多invalid元素。 這就是 jquery 無法找到correct元素來展開或折疊的原因。
您需要在表結構中進行的一些更改：
<table>
<c:forEach var="map" items="${map}">
<!--no need to have new tr td here that just add extra row to your table-->
<tr class="header expand">
<th>${map.key.id}</th>
<th>${map.key.name}</th>
<th>${map.key.status}</th>
<th><span class="sign"></span></th>
</tr>
<!--no need to have different table-->
<tr>
<th>REQUEST_ID</th>
<th>LOGIN_USER</th>
<th>PRICE</th>
<th>STATUS</th>
</tr>
<c:forEach var="item" items="${map.value}">
<tr>
<td>${item.REQUEST_ID}</td>
<td>${item.LOGIN_USER}</td>
<td>${item.PRICE}</td>
<td>${item.STATUS}</td>
</tr>
</c:forEach>
</c:forEach>
</table>
這是上表結構的演示代碼：
$('.header').click(function() { $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); });
table, tr, td, th { border: 1px solid black; border-collapse: collapse; } tr.header { cursor: pointer; color: blue; }.header.sign:after { content: "-"; display: inline-block; }.header.expand.sign:after { content: "+"; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr class="header expand"> <th>${map.key.id}</th> <th>${map.key.name}</th> <th>${map.key.status}</th> <th><span class="sign"></span></th> </tr> <tr style="display:none" > <th>REQUEST_ID</th> <th>LOGIN_USER</th> <th>PRICE</th> <th>STATUS</th> </tr> <tr style="display:none"> <td>${item.REQUEST_ID}</td> <td>${item.LOGIN_USER}</td> <td>${item.PRICE}</td> <td>${item.STATUS}</td> </tr> <tr class="header expand"> <th>${map.key.id}</th> <th>${map.key.name}</th> <th>${map.key.status}</th> <th><span class="sign"></span></th> </tr> <tr style="display:none"> <th>REQUEST_ID</th> <th>LOGIN_USER</th> <th>PRICE</th> <th>STATUS</th> </tr> <tr style="display:none"> <td>${item.REQUEST_ID}</td> <td>${item.LOGIN_USER}</td> <td>${item.PRICE}</td> <td>${item.STATUS}</td> </tr> </table>
創建具有可展開/可折疊部分的 HTML 表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.