如何使用Jquery动态生成Calendar Control？

我正在使用Jquery动态点击按钮生成行。

FIDDLE： http ： //jsfiddle.net/a4NSm/2/

现在的问题是我想将DatePicker添加到它但我不能因为它适用于id而不是类。

码：

         $(function () { $(".datepicker").datepicker({ dateFormat: "dd-mm-yy", onSelect: function (dateText, inst) { var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings); var dateText1 = $.datepicker.formatDate("D, d M yy", date, inst.settings); date.setDate(date.getDate() + 7); var dateText2 = $.datepicker.formatDate("D, d M yy", date, inst.settings); $("#dateoutput").html("Chosen date is " + dateText1 + "; chosen date + 7 days yields " + dateText2 + ""); } }); });  
 
 
 
Alternatif 1
 
 
 
 
 
 
 Add Field Delete Field 

JS

   $(document).ready(function () { filldd(); var rowstring = "Alternatif"; $("#addField").click(function (event) { $("#field tbody").append(rowstring); filldd(); if ($("td").hasClass("number")) { var i = parseInt($(".num:last").text()) + 1; $($(" " + i + " ")).appendTo($(".number")).closest("td").removeClass('number'); } event.preventDefault(); }); $("#deleteField").click(function (event) { var lengthRow = $("#field tbody tr").length; if (lengthRow > 1) $("#field tbody tr:last").remove(); event.preventDefault(); }); }); function filldd() { var data = [ { id: '0', name: 'test 0' }, { id: '1', name: 'test 1' }, { id: '2', name: 'test 2' }, { id: '3', name: 'test 3' }, { id: '4', name: 'test 4' }, ]; for (i = 0; i < data.length; i++) { $(".myDropDownLisTId").last().append( $('', { 'value': data[i].id, 'name': data[i].name, 'text': data[i].name }) ); } }  

Answer 1

请试试这个

HTML

 
 
 
 
Alternatif 1
 
 
 
 
 
 
 Add Field Delete Field 

jQuery的

  $(document).ready(function () { filldd(); CreateDP(); var rowstring = "Alternatif"; $("#addField").click(function (event) { $("#field tbody").append(rowstring); filldd(); CreateDP(); if ($("td").hasClass("number")) { var i = parseInt($(".num:last").text()) + 1; $($(" " + i + " ")).appendTo($(".number")).closest("td").removeClass('number'); } event.preventDefault(); }); $("#deleteField").click(function (event) { var lengthRow = $("#field tbody tr").length; if (lengthRow > 1) $("#field tbody tr:last").remove(); event.preventDefault(); }); }); function filldd(){ var data = [ { id: '0', name: 'test 0' }, { id: '1', name: 'test 1' }, { id: '2', name: 'test 2' }, { id: '3', name: 'test 3' }, { id: '4', name: 'test 4' }, ]; for (i = 0; i < data.length; i++) { $(".myDropDownLisTId").last().append( $('', { 'value': data[i].id, 'name': data[i].name, 'text': data[i].name }) ); } } function CreateDP(){ $(".datepicker").last().datepicker(); } 

现场演示