JSP forEach 遍歷列表實現行點擊展開/收起詳情（ID 唯一化）

問題

使用 `` 遍歷集合生成表格行，每行包含詳情行（初始隱藏），點擊主行切換詳情顯示。但所有詳情行 `id="detail"` 重複，導致 `document.getElementById` 僅獲取第一個。

解決方案：動態生成唯一 ID

<c:forEach var="item" items="${list}" varStatus="status">
  <tr onclick="toggleDetail(${status.index})">
    <td>${item.name}</td>
  </tr>
  <tr id="detail${status.index}" style="display:none;">
    <td colspan="5">${item.detail}</td>
  </tr>
</c:forEach>

<script>
function toggleDetail(index) {
    var el = document.getElementById('detail' + index);
    if (el.style.display === 'none') el.style.display = '';
    else el.style.display = 'none';
}
</script>

關鍵點

• 利用 `varStatus="status"` 獲取循環索引 `status.index`。
• 詳情行 `id="detail${status.index}"` 確保唯一。
• 點擊事件傳遞索引，JS 精確控制對應行。

jQuery 寫法

function toggleDetail(index) {
    $('#detail' + index).toggle();
}