Добавить элементы управления вводами в jQuery DataTables динамически

Question

Позвольте мне начать с того, что я не разработчик интерфейса (jQuery/JavaScript). Я использую jQuery DataTables plugin в моем текущем проекте и визуализацию элемента управления Bootprap во всех ячейках таблицы (все строки и столбцы, кроме заголовков).

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

с последующей ссылкой действия

времени добавить

Требование в том, что при нажатии на ссылку действий, добавить время, новый управляющий вход должен появиться в одной и той же клетке. то есть другой div с id («abc») должен быть создан в одной и той же ячейке.

Я хочу знать, возможно ли это с помощью любого плагина с данными? Я попробовал себя, используя грязный путь, манипулирует HTML, как

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

(полный HTML сНу блок затем)

parent.appendChild(newdiv); 

это добавляет контроль, но timepicker события не работают. Я знаю, что это не очень хороший способ, но все же пробовал :). Я также использую пару атрибутов данных, которые я удалил из кода, чтобы упростить код.

Я с нетерпением жду приятного и чистого способа добавления элементов управления вводом, когда вы нажимаете ссылку на добавление времени, и я сохраняю данные о событии изменения управления timepicker.

Answer 1

я представляю самонастройки только инициализирует время сборщиков, которые присутствуют, когда дом будет загружен.

Вам proabably необходимо инициализировать те, которые вы добавили позже с

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

Answer 2

Вы можете создавать новые элементы, используя следующий синтаксис:

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

И добавить его к элементу вашего выбора, как это:

parent.append(el); 

Answer 3

Вы можете создать динамический флажок, как

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

где containerId - это идентификатор элемента DOM, к которому вы хотите добавить этот флажок.

Или альтернативный синтаксис ...

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

Для получения дополнительной информации обратитесь к следующей ссылке: create dynamically radio button in jquery

Answer 4

Когда я добавляю что-нибудь динамически, что я хочу использовать, что будет вызывать другую функцию в какой-то момент времени я обычно делаю строку типа :

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

Затем добавьте это и создайте функцию, которую вы хотите использовать для создания этого материала. В этом случае моя функция равна

SomeOtherFunction(valueIamPassingIn) 
{ 
    //Do Something 
}