Question

如何为所有新动态添加的日期选择器文本框使用单日期选择器jquery

Answer 1

由于您为每个日期选择器复制了相同的ID，因此最好使用类而不是id。

由于新的日期选择器是动态创建的，因此您需要在创建新的数据标签后调用kendoDatePicker函数。

<table id="myTable">
    <tr><td><input class="datePicker" /></td></tr>
 </table>
<br>
<button type="button" onclick="displayResult()">Insert new row</button>


$(".datePicker").kendoDatePicker({
    close: function() {
       console.log("closed datePicker");   
    }
});


function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
cell1.innerHTML=table.rows[0].cells[0].innerHTML;    
$(".datePicker").kendoDatePicker({
    close: function() {
       console.log("closed datePicker");   
    }
});
}

Answer 2

可以做得更好。但是有效。希望它有所帮助。

逻辑是相对于行计数动态更改id并为每个输入初始化日期选择器。

您的版本无效，因为您只是复制了html内容并粘贴了。需要再次初始化datepicker才能工作。

cell1.innerHTML= '<input id="datePicker'+$(row).index()+'" /></td>';//change innerhtml
$('#datePicker'+c).kendoDatePicker({})); initialze the datepicker again.//init datepicker again

http://jsfiddle.net/9ZTXB/1/

利用所有日期选择器文本框的单个日期选择器功能

2 个答案: