<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>
followed by an action link
The requirement is that when I click on action link , add Time, the new input control should appear in the same cell. i.e. another div with id("abc") should be created in the same cell.
I want to know if that is possible using any plugin of datatable? I tried myself using a dirty way by manipulating html like
var element = document.getElementById("abc"); var parent = element.parentNode; var newdiv = document.createElement('div'); newdiv.innerHTML = '<div class="times-div">
(full html div block then)
this is adding control but timepicker events are not working. I know its not a good way but still tried :). I am also using a couple of data attributes that i removed from code to simplify the code.
I am looking forward for a nice and cleaner way to add the input controls while clicking add time link and I am saving the data on change event of timepicker control.