嘗試要複製一個表格列,裡頭有輸入日期的 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); // 把處理好的資料列新增到表格裡,做為最後一列
這次學到的技巧是:
- 要用 .end() 方法,這樣才能確實把 clone 後的物件裡的 input 值清空。
- datepicker 會自動為 input 加上 id,以便日期選定後有地方可以傳回去,也會自動為 input 加上 CSS class。新增的物件要確實把這些東西洗掉,再重新綁定 (bind) ddatepicker,這樣日曆控制項才會正常運作。
打完收工~
文章標籤
全站熱搜
留言列表