javascript - 动态地将输入控件添加到 jQuery DataTables

Question

首先声明我不是专业的前端 (jQuery/JavaScript) 开发人员。我正在使用 jQuery DataTables plugin在我当前的项目中，并在表格的所有单元格(除标题之外的所有行和列)中呈现一个 Bootstrap timepicker 控件。

<tr>
<td>

<div id ="abc">
<div class="times-div">
<div class="time-label col-sm-6 ">Time</div>
<div class="time-view col-sm-6 bootstrap-timepicker">


<input id="open" type="text" value="" class="timepicker" style="border: 0px; padding: 0px; margin: 0px; width: 100%;">
</div>
</div>
</td>
</tr>

后跟一个 Action 链接

添加时间

要求是当我点击操作链接时，添加时间，新的输入控件应该出现在同一个单元格中。即，应在同一单元格中创建另一个带有 id("abc") 的 div。

我想知道是否可以使用数据表的任何插件？我尝试通过操纵 html 来使用肮脏的方式

var element = document.getElementById("abc");
var parent = element.parentNode;
var newdiv = document.createElement('div');
newdiv.innerHTML = '<div class="times-div"> 

(然后是完整的 html div block )

parent.appendChild(newdiv);

这是在添加控件，但时间选择器事件不起作用。我知道这不是一个好方法，但仍然尝试了 :)。我还使用了一些从代码中删除的数据属性来简化代码。

我期待有一种更简洁的方式来添加输入控件，同时单击添加时间链接，我正在保存时间选择器控件的更改事件的数据。

Answer 1

我想 bootstrap 只会初始化加载 dom 时出现的时间选择器。

您可能需要初始化您稍后添加的那些

$('.bootstrap-timepicker').timepicker();