ASP.NET HTML Table 單元格可編輯：雙擊動態替換為 input 或預置 input 隱藏

需求：<table> 渲染後，點擊 <td> 進入編輯模式。

方案一：雙擊動態生成 input (jQuery)

$('#myTable td').dblclick(function() {
    var td = $(this);
    if (td.find('input').length) return; // 已編輯中
    var text = td.text();
    var input = $('').val(text).width(td.width());
    td.html(input);
    input.focus().select();
    input.blur(function() {
        td.text($(this).val()); // 保存回 td
    });
    input.keydown(function(e) {
        if (e.which === 13) $(this).blur(); // Enter 確認
    });
});

方案二：預置 input 隱藏，點擊顯示 (無 JS 依賴)

<td>
  <span class="view-mode"><%# Eval("Field") %></span>
  <input type="text" class="edit-mode" value="<%# Eval("Field") %>" style="display:none" />
</td>
<script>
$('.view-mode').click(function() {
    $(this).hide().next('.edit-mode').show().focus().select();
});
$('.edit-mode').blur(function() {
    $(this).hide().prev('.view-mode').text($(this).val()).show();
    // 此處可 AJAX 回存後端
});
</script>

選擇建議

• 簡單頁面、行數少：方案一輕量。
• 需批量編輯、驗證、回存：方案二結構清晰、易擴充。

核心模式：**顯示態 ↔ 編輯態 切換**，配合 blur/Enter 確認回存。