小攻城師的戰場筆記

嘗試要複製一個表格列，裡頭有輸入日期的 input，想把它的資料清掉，讓使用者能輸入多筆資料。

在 "How to clone jQuery Datepicker input field" 這篇找到解答。

var row = $($("table > tbody tr")[0]).clone(); // 複製資料列（資料列內包含輸入框）
$(row).find("input").val("").end(); // 清空值

// 要移除 datepicker 自動產生的 hasDatepicker css class，以及自動產生的 ID
// 不移除 css class，datepicker 會完全不運作
// 不移除 id，點了新增列的 datepicker，值會被帶進原來的那個 input 裡
$(row).find("input").removeClass("hasDatepicker").removeAttr("id").datepicker({
    minDate : new Date(2009, 1 - 1, 1),
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy/mm/dd'
}).end();

$('table > tbody:last').append(row); // 把處理好的資料列新增到表格裡，做為最後一列

 

這次學到的技巧是：

1. 要用 .end() 方法，這樣才能確實把 clone 後的物件裡的 input 值清空。
2. datepicker 會自動為 input 加上 id，以便日期選定後有地方可以傳回去，也會自動為 input 加上 CSS class。新增的物件要確實把這些東西洗掉，再重新綁定 (bind) ddatepicker，這樣日曆控制項才會正常運作。

 

打完收工～