Question

我有以下代码可以动态获取数据并填充在表格中：

 $.ajax({
        method: "GET",
        url: "/portal/management/fees/" + source_id,
        success: function() {
            $.getJSON('/portal/management/fees/' + source_id, function(data) {
                var table='<table><thead> <tr> <th>Limit</th> <th>Amount</th> <th>Description</th> <th></th> </tr> </thead>';
                /* loop over each object in the array to create rows*/
                $.each( data, function( index, item){
                    /* add to html string started above*/
                    table+='<tr>' +
                               '<td>' +item.limit +'</td>' +
                               '<td>' +item.amount +'</td>' +
                               '<td>' +item.description + '</td>' +
                               '<td><button class="btn btn-xs btn-default btn-action edit-btn"'+
                                    'id="editBtn"'+
                                    'data-fee-id="'+ item.id+'"'+
                                    'data-fee-amount="'+item.amount+'"'+
                                    'data-fee-limit="'+item.limit+'"'+
                                    'data-fee-description="'+item.decription+'"'+
                                    'data-fee-type="'+item.type+'"'+
                                    'data-fee-vat="'+item.vat+'"'+
                                    'data-toggle="modal"'+
                                    'data-target="#feeModal">'+
                                    '<i class="fa fa-edit"></i>'+
                                    '</button>' +
                               '</td>' +
                           '</tr>';
                });

                $("#source-table").html( table );
            });
        },
        error: function() {
            console.log('Error occurred! ' + msg.responseText);
        }
    });

但是我有一个以模态打开的按钮，我需要将每个传递的数据传递给每个记录的各个模态。自定义属性似乎不起作用，并且我有以下代码，我已经尝试但无济于事。

$(".edit-btn").click(function() {

    var fee_id = $(this).attr('data-fee-id');
    var amount =  $(this).attr('data-fee-amount');
    var limit =  $(this).attr('data-fee-limit');
    var desc =  $(this).attr('data-fee-description');
    var type = $(this).attr('data-fee-type');
    var vat = $(this).attr('data-fee-vat');

    $('#feeId').val(fee_id);
    $('#amount').val(amount);
    $('#limit').val(limit);
    $('#desc').val(desc);
    $('#type').val(type);
    $('#vat').val(vat);
});

所以问题是如何为每个单击相应按钮的记录获取模态中的数据？任何帮助/建议都非常感谢。

Answer 1

用一个词来说。试试

success: function() {
            $.getJSON('/portal/management/fees/' + source_id, function(data) {
                var table='<table><thead> <tr> <th>Limit</th> <th>Amount</th> <th>Description</th> <th></th> </tr> </thead>';
                /* loop over each object in the array to create rows*/
                $.each( data, function( index, item){
                    /* add to html string started above*/
                    table+='<tr>' +
                               '<td>' +item.limit +'</td>' +
                               '<td>' +item.amount +'</td>' +
                               '<td>' +item.description + '</td>' +
                               '<td><button class="btn btn-xs btn-default btn-action edit-btn"'+
                                    'id="editBtn"'+
                                    'data-fee-id="'+ item.id+'"'+
                                    'data-fee-amount="'+item.amount+'"'+
                                    'data-fee-limit="'+item.limit+'"'+
                                    'data-fee-description="'+item.decription+'"'+
                                    'data-fee-type="'+item.type+'"'+
                                    'data-fee-vat="'+item.vat+'"'+
                                    'data-toggle="modal"'+
                                    'data-target="#feeModal">'+
                                    '<i class="fa fa-edit"></i>'+
                                    '</button>' +
                               '</td>' +
                           '</tr>';
                });

                $("#source-table").html( table );
                $(".edit-btn").click(function() {

                  var fee_id = $(this).attr('data-fee-id');
                  var amount =  $(this).attr('data-fee-amount');
                  var limit =  $(this).attr('data-fee-limit');
                  var desc =  $(this).attr('data-fee-description');
                  var type = $(this).attr('data-fee-type');
                  var vat = $(this).attr('data-fee-vat');

                 $('#feeId').val(fee_id);
                 $('#amount').val(amount);
                 $('#limit').val(limit);
                 $('#desc').val(desc);
                 $('#type').val(type);
                 $('#vat').val(vat);
                 });
            });
        },

Answer 2

附加你的代码

$(".edit-btn").click(function() {

    var fee_id = $(this).attr('data-fee-id');
    var amount =  $(this).attr('data-fee-amount');
    var limit =  $(this).attr('data-fee-limit');
    var desc =  $(this).attr('data-fee-description');
    var type = $(this).attr('data-fee-type');
    var vat = $(this).attr('data-fee-vat');

    $('#feeId').val(fee_id);
    $('#amount').val(amount);
    $('#limit').val(limit);
    $('#desc').val(desc);
    $('#type').val(type);
    $('#vat').val(vat);
});

<{1>}

旁边的

绑定＆＃34;即时＆＃34;数据到点击模式

2 个答案: