🔍如何在動態與初次載入的影像附件列表中，同時顯示「表單名稱_建檔時間」（commitTime）

 

前言

在企業級網頁系統中，常見需求是「在影像附件列表裡，同時顯示表單名稱與上傳（建檔）時間」。有些專案只在下拉選單 (<select>) 裡，把 commitTime 串到選項文字，但在第一次載入的 JSP 及之後動態新增的列 (append) 卻常常遺漏這一步。本文將以實際範例，細說如何針對：

1. JSP 初次渲染

2. jQuery 動態新增

兩種情境，統一在「表單名稱」欄加上 _建檔時間。

---

問題描述

1. 下拉選單
   利用 JSP 生成 <option> 時，接收到形如 value="A010008,…,20250701,…" 的字串，並在前端一次性把文字改為 A010008_20250701。

2. 第一次載入的表格（JSP <c:forEach>）
   JSP 只輸出 ${row.formName}，沒有串入 ${row.commitDateTime}。

3. 動態新增的表格列（jQuery append）
   雖然後來改了 JavaScript，把原本取到的名稱與 commitTime 組合，但「既有」的列仍然看不到時間。

---

解法步驟

一、修正 JSP 初次渲染

在 UnderwriteIndPolicyNote.jsp 中，找到影像附件列表的迴圈：

<c:forEach items="${imagesList}" var="row" varStatus="each">
  <tr class="colorChange">
    <!-- … -->
    <!-- 原本 -->
    <td data-label="表單名稱" class="text-left">
      ${row.formName}
    </td>
    <!-- … -->
  </tr>
</c:forEach>  

將上面這段改為：

<c:forEach items="${imagesList}" var="row" varStatus="each">
  <tr class="colorChange">
    <!-- … -->
    <!-- 隱藏欄位也同步更新 -->
    <input type="hidden"
           name="imagesContent_${each.index}"
           value="${row.formName}_${row.commitDateTime}"/>
    <!-- 顯示欄位：表單名稱 + 建檔時間 -->
    <td data-label="表單名稱" class="text-left" id="imagesTdContent_${each.index}">
      ${row.formName}_${row.commitDateTime}
    </td>
    <!-- … -->
  </tr>
</c:forEach>

• 隱藏欄位：imagesContent_${index} 的 value 改成 formName_commitDateTime，方便後端送出與序列化。

• 顯示欄位：直接在 <td> 內把時間串上。

---

二、修正「新增明細」的 JSP 字段名稱

在 UnderwriteIndPolicyNoteItem.jsp，影像附件的隱藏欄位原本是：

<input type="hidden" name="commitTime_${each.index}"
       value="${row.commitDateTime}"/>

注意多了 3 個 m，導致前端 JavaScript 透過 children('input').eq(4) 找不到 commitTime。請統一改成：

<input type="hidden" name="commitTime_${each.index}"
       value="${row.commitDateTime}"/>

如此一來，JavaScript 才能準確地用：

var rowName      = $cell.children('input').eq(2).val();
var rowCommitTime= $cell.children('input').eq(4).val();
var formName     = rowName + "_" + rowCommitTime;

抓到正確的值並顯示。

---

完整效果

1. 下拉選單

   <option value="A010008,xxx,20250701,yyy">
     A010008_20250701
   </option>
   
   

2. JSP 初次載入的表格

   
   

   表單編號	表單名稱	表單總頁數
   A010008	表單說明_20250701	3

3. 按下「新增影像」動態插入後

   表單編號	表單名稱	指定影像頁數
   A020010	客戶資料回覆符號_20250705	全選

以上三個環節都能統一看到「表單名稱_建檔時間」，完整解決 commitTime 漏出問題！

---

結語

透過以上兩個小修改，就能在 JSP 初次渲染 和 jQuery 動態新增 的所有影像附件列，統一顯示 commitTime。這種前後端協作的小細節，在大型系統裡常常被忽略，但卻影響使用者對「時間軸」的感知。希望本文能幫助你快速定位並修正類似問題，也歡迎在留言區分享你的做法！