javascript - 将 appendTo 动态行值传递给 Bootstrap 模式

Question

我目前正在使用 appendTo 添加动态行。我想要发生的是，如果我单击其中一个 td (不包括删除按钮)，它将打开一个 Bootstrap 模式窗口并获取其他值td 属于它的行。这是图片。

这是我动态添加的代码，我想获取 td 的值并将其传递给 bootstrap modal。

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code" data-toggle="modal" data-target="#mymodal">'+code+'</td>'+
        '<td class="item_name" data-toggle="modal" data-target="#mymodal">'+name+'</td>'+       
        '<td class="item_qtty" data-toggle="modal" data-target="#mymodal">'+qtty+'</td>'+ 
        '<td class="item_cost" data-toggle="modal" data-target="#mymodal">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

我尝试使用 data-toggle="modal"data-target="#mymodal" 将 onclick 放在 td 上，但只有模态正在运行，而不是我正在使用的功能，例如:

function GetData() {
    $('.item_code').click(function(){
        alert($(this).closest('tr').find('.item_code'));
    });
}

Answer 1

我刚刚解决了我自己的问题，我只缺少一个 Bootstrap 模式调用。我添加了一个类 getdata，我将调用我的 javascript 函数

function AddOrder(new_code, new_name, new_qtty, new_cost) {    
    var rows = "";  
    var code = new_code;
    var name = new_name;
    var cost = new_cost;
    var qtty = new_qtty;

    rows += 
        '<tr>"' + 
        '<td class="item_code getdata" onclick="GetData();">'+code+'</td>'+
        '<td class="item_name getdata" onclick="GetData();">'+name+'</td>'+       
        '<td class="item_qtty getdata" onclick="GetData();">'+qtty+'</td>'+ 
        '<td class="item_cost getdata" onclick="GetData();">'+cost+'</td>'+ 
        '<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
        '</tr>';
    $(rows).appendTo("#dynamic_added tbody");
}

如果我点击除按钮以外的 td 的任何地方，它将弹出模式并传递该行的当前数据。

function GetData() {
    $(document).on('click', '.getdata', function(){
        $('#mymodal').modal();
        var modal_code =$(this).closest('tr').find('.item_code').text();
        var modal_name =$(this).closest('tr').find('.item_name').text();
        var modal_qtty =$(this).closest('tr').find('.item_qtty').text();
        var modal_cost =$(this).closest('tr').find('.item_cost').text();

        var modal = $("#mymodal"); // this is the id of my modal 
        modal.find('.modal-body').text(modal_code + modal_name + modal_qtty + modal_cost);
    }); 
}