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

    });

});

动态更改数据表行控件

1 个答案: