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
    });         
});

我必须在此处提及自定义附加功能。

Answer 1

由于它是一个小部件，因此一旦将元素添加到dom中，就需要对其进行初始化。

所以

使用appendTo（）返回已添加的tr
使用class作为datepicker而不是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++;
    });
});

jQuery UI datepicker函数动态调用

1 个答案: