Question

我正在一个项目中，在向动态添加的表行添加datetimepicker时遇到困难。我已将datetimepicker添加到静态表行中，它对它们工作正常，但不适用于动态添加的表行。

我遵循的有关datetimepicker的教程

https://eonasdan.github.io/bootstrap-datetimepicker/

我尝试的代码：我正在克隆隐藏的行。

行克隆功能：

  // Table Add Function
  $('.table-add').click(function () {

    var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
    hid = $TABLE.find('tr.hide').attr('id');
    // //Assigning every table row a unique ID
    var max=0;
    $('table').find('tr').each(function(){
        var id=parseInt($(this).attr('id'));
        if (id>=max){
           max = id;
         }
     });

     //cloning row with new ID  
     $clone.attr('id', parseInt(max)+1);
     //always assign new id to new table row, will be easy to recognize rows
     $clone.find('input.myinput').attr('id', parseInt(max)+1);

     $clone.find("[name='datepicker']").datetimepicker();
     //$("[name='datepicker']").datetimepicker();

     $hiddentr = $('table').find('tr.hide');

     //add dynamic word picker to cloned rows dynamically
     $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
     $clone.appendTo( $('#'+hid).parent());
     //submitting form after row clone
     submitForm();
  });

隐藏的td的HTML：

<td> 
   <div style="position: relative"> 
     <input class = "form-control" type= "text" name = "datepicker" id= "datetime">
   </div> 
</td>

Answer 1

混乱，但每次添加一行后都只是初始化datetimepisker ...

$('#datetimepicker1').datetimepicker();

$('#datetimepicker2').datetimepicker();

等

Answer 2

一旦元素完全生成到dom中，我就可以初始化datetimepicker。 working codepen

  function addTableRow() {  

  var tbodyElement = document.getElementById("tbody");  
  var trElement = document.createElement("tr");

  trElement.id = "generatedTr";

  for (var x=0; x<3; x++) {
      var tdElement = document.createElement("td");  
      var textNode = document.createTextNode("Generated td: " + x);
      tdElement.appendChild(textNode);      
      trElement.appendChild(tdElement);
  }

  var finalTdElement = document.createElement("td");  
  var inputElement = document.createElement("input");
  inputElement.setAttribute("type", "text");
  inputElement.id = "generatedInput";  
  finalTdElement.appendChild(inputElement);
  trElement.appendChild(finalTdElement);  
  tbodyElement.appendChild(trElement);  

  $('#generatedInput').datetimepicker();
}

如果要生成的多个元素需要日期时间选择器，那么我建议在所有元素上创建一个类，然后像这样对该类实例化插件。

  $('.dateTimePickers').datetimepicker();

Answer 3

我建议不要在每个元素之后每次都初始化datetimepicker。最好使用以下代码。它将像魅力一样工作。

我为此做了很多研究。因此，建议使用以下代码。

$('body').on('focus',".datetimepicker", function(){
    $(this).datetimepicker();
});

在动态添加的表行中添加datetimepicker的问题

3 个答案: