jquery - 对所有日期选择器文本框使用单个日期选择器功能

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 内容并粘贴了。日期选择器需要再次初始化才能工作。

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/