動態添加輸入控件到jQuery DataTables

讓我首先說我不是一個專家前端（jQuery/JavaScript）開發人員。我在當前項目中使用jQuery DataTables plugin，並在表格的所有單元格（除標題外的所有行和列）中呈現Bootstrap timepicker控件。動態添加輸入控件到jQuery DataTables

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

這是在加入控制，但timepicker事件不工作。我知道它不是一個好方法，但仍然嘗試:)。我還使用了一些數據屬性，我從代碼中移除以簡化代碼。

我期待着一個更好，更乾淨的方式來添加輸入控件，同時單擊添加時間鏈接，我將數據保存在timepicker控件的change事件上。

來源

2015-07-20 user2443648

我想只有引導初始化時間選擇是存在加載DOM時。

你proabably需要我時動態添加任何東西，我想用這將調用另一個函數在某個時間點我通常做一個字符串像初始化你

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

來源

2015-07-20 18:08:10 andrew

您可以使用此語法創建新的元素：

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

並將它添加到您選擇的是這樣的元素：

parent.append(el);

來源

2015-07-20 18:06:10 hyde

您可以創建動態複選框一樣

$('#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

來源

2015-07-20 18:07:52

後來加入的影片：

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

然後追加一條，並創建您要使用做的東西用的功能。在這種情況下，我的功能是

SomeOtherFunction(valueIamPassingIn) 
{ 
    //Do Something 
}

來源

2015-07-20 18:12:14

動態添加輸入控件到jQuery DataTables

回答

相關問題