How To Dynamically Generate Calendar Control Using Jquery?
I am generating rows with dynamically on button click using Jquery. FIDDLE: http://jsfiddle.net/a4NSm/2/ The problem now is that I want to add DatePicker to it but I cant because
Solution 1:
Please try this
HTML
<tableid="field"><tbody><tr><td>Alternatif <spanclass='num'>1</span></td><td><inputtype="text" /></td><td><selectclass="myDropDownLisTId"><inputtype="text"class="datepicker" /></select></td></tr></tbody></table><buttontype="button"id="addField">Add Field</button><buttontype="button"id="deleteField">Delete Field</button>
jQuery
$(document).ready(function () {
filldd();
CreateDP();
var rowstring = "<tr><td class='number'>Alternatif</td><td><input type='text'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td></tr>";
$("#addField").click(function (event) {
$("#field tbody").append(rowstring);
filldd();
CreateDP();
if ($("td").hasClass("number")) {
var i = parseInt($(".num:last").text()) + 1;
$($("<span class='num'> " + i + " </span>")).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();
});
});
functionfilldd(){
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(
$('<option />', {
'value': data[i].id,
'name': data[i].name,
'text': data[i].name
})
);
}
}
functionCreateDP(){
$(".datepicker").last().datepicker();
}
Post a Comment for "How To Dynamically Generate Calendar Control Using Jquery?"