jqueryUI datepicker 没有 document.ready 功能

Question

要创建jquery datepicker，我们使用以下函数

 $( function() {
    $( "#datepicker" ).datepicker();
  } );
<input type="text" id="datepicker">

我正在尝试使用以下新记录功能实现内联编辑功能

function createRowForAdd(){
    var tRow = "<tr>"
    for(var i = 0; i < array.length; i++){
        var jsonObj = array[i];
        tRow +="<td><input type='text' id='"+jsonObj.id+"'  /></td>" 
    }
    tRow += "</tr>";
    return tRow;
}

    function Add(){
      var tRow  = createRowForAdd();
      $("#tblId tbody").append(tRow); 
}

<button id="btnAdd" onclick="javascript:Add()">New</button>  
<table id="tblId" border="1">   
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Birth Date</th> 
                <th>Joining Date</th> 
                <th></th> 
            </tr>
        </thead>
    <tbody>
    </tbody>
    </table> 

一个或多个列可能包含一个日期字段。对于那些列，我想显示一个日期选择器。据我了解，一旦 DOM 准备就绪，就会触发 document.ready 函数。是否可以在添加行时启动日期选择器？

Answer 1

.datepicker() 函数只需要元素在 DOM 中，因此您可以在添加行后执行它而不会出现问题，为该输入字段应用所需的选择器。

关于选择器，考虑到您将有多个数据选择器输入，请避免使用相同的id（id 被设计为在 DOM 中是唯一的）。你最好改用一个类。

function Add() {
    var tRow  = createRowForAdd();
    $("#tblId tbody").append(tRow);

    // When creating the row, set class="datepicker" the inputs of the row that
    // has to be converted to a datetime picker. Then you just have to do this...
    $("input.datepicker").datepicker();
}

或者更好的是，仅将其应用于新添加行（最后一行）的输入...

function Add() {
    $("#tblId tbody").append(createRowForAdd()).find('tr:last input.datepicker').datepicker();
}

已编辑：我看不到您的 array 变量的值，但查看您的代码，看起来同一列的所有输入都将具有相同的 id。正如我之前提到的，避免这种情况，因为id's 被设计为在 DOM 中是唯一的。如果需要 id，可以使用行号更改每个 id 的输入。在这里，您有一个具有该想法的示例...

HTML：

<button id="btnAdd">New</button>  
<table id="tblId" border="1">   
  <thead> 
    <tr> 
      <th>Name</th> 
      <th>Birth Date</th> 
      <th>Joining Date</th> 
      <th></th> 
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JQUERY：

// I'm making up the content of this array. The question doesn't show it.
var array = [
    { 'id': 'name', 'class': '' },
    { 'id': 'birthdate', 'class': 'datepicker' },
    { 'id': 'joiningdate', 'class': 'datepicker' },
    { 'id': 'something', 'class': '' }
];

function createRowForAdd(rowPos) {
    var tRow = [];
    for (var i=0, l=array.length; i<l; i++)
        tRow.push('<td><input type="text" id="'+array[i].id+rowPos+'" class="'+array[i].class+'" /></td>'); 
    return '<tr>' + tRow.join('') + '</tr>';
}

$('button#btnAdd').click(function() {
    var rowPos = $("table#tblId tbody tr").length;
    $("table#tblId tbody").append(createRowForAdd(rowPos)).find('tr:last input.datepicker').datepicker();
});

还有小提琴……https://fiddle.jshell.net/rigobauer/tpxnvpy4/

希望对你有帮助