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变量的值，但查看您的代码，看起来同一列的所有输入都具有相同的{ {1}}。正如我之前提到的那样，避免这种情况，因为id被设计为在DOM中是唯一的。如果需要id，可以使用行号更改每个id的输入。这里有一个有这个想法的例子......

<强> HTML ：

id's

<强> JQUERY ：

<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>

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

我希望它有所帮助

没有document.ready函数的jqueryUI datepicker

1 个答案: