Question

我陷入了疑问，而且无法正常工作。我在表格行中创建了一些输入文本框，在我们单击add Row按钮时，使用一个按钮添加了具有相同输入文本框的新行。

以下是代码：

<table>
<tr>
<td><input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" />
  <span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
</td>
<td><input type="text" name="last_date[]" value="" id="last_date" class="last_date" />
  <span class="text-danger"><?php echo form_error('last_date[]');?></span>
</td>
<td><input type="text" name="priority[]" value="" />
  <span class="text-danger"><?php echo form_error('priority[]');?></span>
</td>
<td><input type="text" name="frequency[]" value="" />
  <span class="text-danger"><?php echo form_error('frequency[]');?></span>
</td>
</tr>
</table>
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" />
<input class="btn btn-primary" type="submit" name="submit" value="submit">

当我们点击添加按钮

时，这是添加新行的JQuery代码

 function addRow(tableID) {

      var table = document.getElementById(tableID);

      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);

      var colCount = table.rows[1].cells.length;

      for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
          case "text":
              newcell.childNodes[0].value = "";
              break;
          case "checkbox":
              newcell.childNodes[0].checked = false;
              break;
          case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;

        }
      }
    }

我正在使用jQuery-ui datepicker从文本框中选择日期。这是datepicker代码

$('.assigned_date').each(function(){
    $('.assigned_date').removeClass('hasDatepicker').datepicker();
});

当我点击第一个不是动态创建的文本框时，它会显示日历并选择日期。但问题是当我点击添加按钮并创建相同的行然后如果我选择文本框然后它不显示任何日历。我怎么能解决这个问题..请帮助找到解决方案。当我通过inspect元素看到它时，它会显示带有hasDatepicker

的类名

这里创建[小提琴] [1]请参阅

https://jsfiddle.net/r83vmv1q/3/

Answer 1

@ M.Tanzil：您的代码中存在错误。

1）首先在第一个日期选择器中选择一个日期。

2）然后添加一个新行。

3）然后在第二行中选择一个日期。

第二个选定日期将添加到第一行。

我已经解决了这个问题。问题来了，因为所有的datepickers具有相同的id。我为datepickers分配了动态ID。

请检查此Fiddle。

Answer 2

您提供的小提琴中的javascript代码中存在很多错误。此外，在创建要与initialize绑定的输入的函数之后，您必须datepicker datepicker。

另外，当你添加一行时，销毁所有的datepicker实例然后在追加新行后重新绑定datepicker。

请参阅其工作的 modified Fiddle 。

注意：所有新创建的rows和内部输入都会显示datepicker，但是当您在row selected date中选择日期时1}}将显示在top most row中（如果输入具有相同的类），因此您也必须对其进行管理。尝试使用不同的类或唯一的ID。

希望它有所帮助。

Answer 3

在您从javascript创建行时删除ids assigned_date和last_date，它的基本规则ID不应该在html中重复。

使用下面的代码

<table>
<tr>
<td><input type="text" name="assigned_date[]" value=""  class="assigned_date datetimepick" />
  <span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
</td>
<td><input type="text" name="last_date[]" value=""  class="last_date datetimepick" />
  <span class="text-danger"><?php echo form_error('last_date[]');?></span>
</td>
<td><input type="text" name="priority[]" value="" />
  <span class="text-danger"><?php echo form_error('priority[]');?></span>
</td>
<td><input type="text" name="frequency[]" value="" />
  <span class="text-danger"><?php echo form_error('frequency[]');?></span>
</td>
</tr>
</table>
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" />
<input class="btn btn-primary" type="submit" name="submit" value="submit">

如果您使用datetimepicker初始化，则使用以下类作为标识符

$('.datetimepick').datetimepicker({
    format:"Y-m-d H:i",
    timepickerScrollbar:false,
    minDate: 0
});

Answer 4

您应该验证您的js代码以及为什么不尝试使用输入类型日期：

[<input type="date">][1]

Answer 5

作为建议：确保在创建新元素后从文本框中选择日期。！

如何在动态创建的行

5 个答案: