将输入控件动态添加到 jQuery DataTables答案

【问题标题】：Add input controls to jQuery DataTables dynamically将输入控件动态添加到 jQuery DataTables
【发布时间】：2015-07-20 18:02:15
【问题描述】：

首先让我说我不是专业的前端 (jQuery/JavaScript) 开发人员。我在当前项目中使用jQuery DataTables plugin，并在表格的所有单元格（除标题之外的所有行和列）中呈现引导时间选择器控件。

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

后跟一个动作链接

添加时间

要求是当我点击动作链接时，添加时间，新的输入控件应该出现在同一个单元格中。即应在同一单元格中创建另一个具有 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 块）

parent.appendChild(newdiv);

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

我期待在单击“添加时间”链接时找到一种更好、更简洁的方式来添加输入控件，并且我正在保存有关时间选择器控件更改事件的数据。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap datatables

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以使用以下语法创建新元素：

var el = $('<div>', {id: 'abc', text: 'Some text'});

并将其附加到您选择的元素，如下所示：

parent.append(el);

【讨论】：

【解决方案3】：

你可以像这样创建动态复选框

$('#containerId').append('<input type="checkbox" name="myCheckbox" />');

其中 containerId 是要添加复选框的 DOM 元素的 ID。

或替代语法...

$('#containerId')
    .append(
       $(document.createElement('input')).attr({
           id:    'myCheckbox'
          ,name:  'myCheckbox'
          ,value: 'myValue'
          ,type:  'checkbox'
       })
);

更多信息请查看以下链接：create dynamically radio button in jquery

【讨论】：

【解决方案4】：

当我动态添加任何我想使用的东西时，它会在某个时间点调用另一个函数，我通常会执行如下字符串：

 var appendString = "<div class=\"FieldSelector\"onclick=\"SomeOtherFunction('" + $(this).text() + "')" + "\">" + $(this).text() + "</div>";

然后附加它并创建一个你想用来做这些事情的函数。在这种情况下，我的功能是

SomeOtherFunction(valueIamPassingIn)
{
    //Do Something
}

【讨论】：