在 JSP 中创建可折叠表答案

【问题标题】：Creating a Collapsible table in JSP在 JSP 中创建可折叠表
【发布时间】：2020-09-19 16:39:29
【问题描述】：

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>

我有一张正在 JSP 中检索的地图。它有对象作为键，arraylist 作为值。arraylist 由作为对象的行组成。对于具有唯一 reqid 的特定键，它具有特定于 reqid 的所有行作为 arraylist 中的对象。我想在 JSP 中检索它。它必须是可折叠的表格，键是我的标题和值，即与 reqid 相关的行必须出现在该标题下。我有独立的 JavaScript 代码来实现它。我尝试在 JSP 中添加，但浏览器没有结果.我需要帮助在 JSP 代码中设计可折叠表格。

预期输出：

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

【问题讨论】：

标签： javascript java jquery jsp hashmap

【解决方案1】：

您的 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>

【讨论】：

感谢您的帮助。我收到一个错误：未捕获类型错误：$(...).toggleClass(...).nextUntil is not a function at HTMLTableRowElement. (file. js:9) 在 HTMLTableRowElement.handle (jquery.min.js:19) 在 HTMLTableRowElement. (jquery.min.js:19)
你添加了 jquery cdn 吗？在你的代码中？即：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 在您的 <head></head> 标签中
错误刚刚纠正。感谢您的帮助。我只需要在代码中进行一些小的更新。我们如何才能在默认情况下保持关闭状态？即当用户点击+它需要显示行
它完成了要求。但是当页面第一次加载时，它会显示一个表格的所有内容微秒然后隐藏。那么有没有办法解决这个问题？您实际上可以通过运行您的演示代码来查看。
对不想显示的 trs 使用 style="display:none"。