Динамически изменяемые элементы управления строк

Question

У меня есть таблица данных, в которую я динамически добавляю строки после того, как пользователь нажимает кнопку добавления.Теперь мое требование - я динамически добавляю 2 текстовых поля и кнопку сохранения.Когда пользователь нажимает кнопку «Сохранить», значение, введенное в текстовые поля, необходимо сохранить в качестве метки, а текст кнопки «Сохранить» повернуть для редактирования.

Если пользователь нажимает кнопку редактирования, метка должна быть изменена натекстовые поля снова и текст кнопки редактирования изменился на Сохранить.

Ниже мой код:

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

Любые предложения на то же самое.На самом деле поля будут намного больше, чем это, но просто нужно руководство и какой подход должен быть для этого?.

Заранее спасибо !!!.

Answer 1

Вы можете сделать это, чтобы решить вашу проблему:

$(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');

    });

});