Change datatable row controls dynamically - dynamic

Question

I have a datatable in which I add rows dynamically after user clicks on add button. Now my requirement is I dynamically add 2 textboxes and a save button. Once the user clicks on Save button the value entered in the textboxes needs to be save as a label, and the Save button text turned to edit.
If the user clicks edit button, the label needs to be changed to textboxes again and edit button text changed to Save.
Following is my code so far:
function addNewRow() {
$('#addRow').on('click', function () {
t.row.add([
'<input type="text" class="form-control">',
'<input type="text" class="form-control">',
'<button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">Save</button>'
]).draw();
});
}
var t;
$(document).ready(function () {
t = $('#datatable').DataTable();
});
Any suggestions on the same. Actually the fields are going to be lot more then this, but just want guidance and what should be the approach for this?.
Thanks In Advance!!!.

Answer 1

You can do like this to solve your issue:
$(document).ready(function () {
t = $('#datatable').DataTable();
$('#addRow').on('click', function () {
t.row.add([
'<input type="text" class="form-control text1">',
'<input type="text" class="form-control text2">',
'<button type="button" class="btn green btn-xs select-row save_btn" data-id="7" data-includeTax="N">Save</button>'
]).draw();
});
$('body').on('click', '.save_btn', function (e) {
e.preventDafault();
var _this = $(this);
$.ajax({
type: 'post',
url: 'your url',
data: { 'text1' : $(this).closest('tr').find('.text1').val(), 'text2' : $(this).closest('tr').find('.text2').val() },
dataType : 'json',
})
.done(function (data) {
_this.text('Edit');
_this.addClass('edit_btn');
_this.removeClass('save_btn');
});
return false;
});
$('body').on('click', '.edit_btn', function () {
_this.text('Save');
_this.addClass('save_btn');
_this.removeClass('edit_btn');
});
});