Question

抱歉，我对本节的了解非常糟糕......也许这很简单。我建立了一个像这样的百里香叶的动态列表（这是有效的）： html/thymeleaf code（代码也在帖子的末尾）

那么怎么可能（有可能）将每个列表条目作为点击“行”，当我点击它时，它应该显示下面列表条目的详细内容（如下拉列表））。每个条目的详细信息是另一个动态列表。第一次单击打开，第二次关闭详细信息。顺便说一句......我不使用JQuery只是JS，java，html，css和thymeleaf。

<body>
  <table>
    <tr>
      <th>Phasen Name</th>
      <th>PC</th>
      <th>AC</th>
      <th>EV</th>
    </tr>
    <tr th:each="Projectphase : ${evaPhasen}">
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
  </table>
</body>

感谢您的帮助和解答！曼努埃尔

Answer 1

我的理解是你正在尝试实现accordion，这需要一些javascript。

主要思想是：切换显示当前行（display : none <-> display : table-row）下方的详细信息行。这是通过将EventListener附加到每行td的第一个class='accordion'来完成的。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      console.log(this.parentElement.nextElementSibling)
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.parentElement.nextElementSibling;
        if (panel.style.display === "table-row") {
            panel.style.display = "none";
        } else {
            panel.style.display = "table-row";
        }
    });
}

table {
  border-collapse : collapse;
}

td, th {
  border : 1px solid black
}

<table>
    <tr>
      <th>Phasen Name</th>
      <th>PC</th>
      <th>AC</th>
      <th>EV</th>
    </tr>
    <tr>
      <td class="accordion">Phasename 1 (See Details)</td>
      <td>PC1</td>
      <td>AC1</td>
      <td>EV1</td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 1</td></tr>
    <tr>
      <td class="accordion">Phasename 2 (See Details)</td>
      <td>PC2</td>
      <td>AC2</td>
      <td>EV2</td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 2</td></tr>
  </table>

请注意，使用Thymeleaf时，静态HTML（为了给您一个可运行的代码段而编写）将被替换为：

<table>
  <tr>
    <th>Phasen Name</th>
    <th>PC</th>
    <th>AC</th>
    <th>EV</th>
  </tr>
  <th:block th:each="Projectphase : ${evaPhasen}"
    <tr>
      <td class="accordion" th:text="${Projectphase.getphasenname()} (see details)"></td>
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 1</td></tr>
  </th:block>
</table>

请注意使用th:block为单个ProjectPhase获取2 <tr>（请参阅：th:block Thymeleaf documentation）

手风琴很大程度上受到w3schools

的启发

动态百里香列表作为下拉列表

1 个答案: