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

Question

首先声明我不是专业的前端 (jQuery/JavaScript) 开发人员。我在当前项目中使用 jQuery DataTables plugin，并在 table 的所有单元格（除 headers 之外的所有行和列）中呈现 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>

后跟一个动作 link

添加时间

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

我想知道是否可以使用任何数据插件table？我尝试通过操纵 html like

来使用肮脏的方式

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

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

我期待在单击添加时间时添加输入控件的一种更简洁的方式 link 并且我正在保存时间选择器控件的更改事件的数据。

Answer 1

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

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

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

parent.append(el);

Answer 2

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

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

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

或替代语法...

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

有关详细信息，请参阅以下内容 link：create dynamically radio button in jquery

Answer 3

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

您可能需要使用

初始化您稍后添加的那些

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

Answer 4

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

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

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

SomeOtherFunction(valueIamPassingIn)
{
    //Do Something
}

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

Add input controls to jQuery DataTables dynamically

html

javascript

jquery

datatables

twitter-bootstrap