jQuery UI datepicker函數動態調用

Question

這是可以動態創建行的函數。

$(document).ready(function() {    
    var count = 1;
    var row = $("table#myTable tr:eq(1)");          
    $(document).on('click', '#addrow', function() {
       $('#myTable tbody').append('<tr class="prototype" id="' + count + '"> <td align="center" ><input type="text" size="10" name="grnno[' + count + ']" id="grnno"  class="required" align="right"/></td><td align="center" ><input type="text" name="paymentdateid="datepicker size="10" class="datepicker" align="right" /></td><td align="center"><select id="bankname" name="bankname"><option value="">Select Bank Name</option><option value="SBI">SBI</option><option value="UBI">UBI</option><option value="UCO">UCO</option><option value="HDFC">HDFC</option></select></td><td align="center" ><input type="text" name="amount[' + count + ']" id="amount[' + count + ']" size="10" class="required" align="right"/></td><td align="center"><input type="button" value="Delete" onclick="deleteRow(this)"></td><td style="display:none;"><input type="text" name="id[]" value="' + count + '" class="id" /></td></tr>');
       count++;
    });     
});

現在，我想將此功能附加到“付款日期”字段，因為我需要動態選擇日期 。

$(function() {
    $( "#datepicker" ).datepicker({
        inline: true
    });         
});

我不得不在這里提到自定義append函數是不可能的。

Answer 1

由於它是一個小部件，因此您需要在將元素添加到dom后對其進行初始化。

所以

• 使用appendTo（）取回添加的tr
• 使用類作為日期選擇器而不是ID，因為元素的ID必須是唯一的
• 附加tr后，找到datepicker元素並初始化小部件

嘗試

$(document).ready(function () {

    var count = 1;
    var row = $("table#myTable tr:eq(1)");

    $(document).on('click', '#addrow', function () {
        var $tr = $('<tr class="prototype" id="' + count + '"> <td align="center" ><input type="text" size="10" name="grnno[' + count + ']" id="grnno"  class="required" align="right"/></td><td align="center" ><input type="text" name="paymentdate classs="datepicker size="10" class="datepicker" align="right" /></td><td align="center"><select id="bankname" name="bankname"><option value="">Select Bank Name</option><option value="SBI">SBI</option><option value="UBI">UBI</option><option value="UCO">UCO</option><option value="HDFC">HDFC</option></select></td><td align="center" ><input type="text" name="amount[' + count + ']" id="amount[' + count + ']" size="10" class="required" align="right"/></td><td align="center"><input type="button" value="Delete" onclick="deleteRow(this)"></td><td style="display:none;"><input type="text" name="id[]" value="' + count + '" class="id" /></td></tr>').appendTo('#myTable tbody');
        $tr.find(".datepicker").datepicker({
            inline: true
        });
        count++;
    });
});