将appendTo动态行值传递给bootstrap模式

Question

我目前正在使用appendTo添加动态行。我想要发生的是，如果我单击其中一个td （不包括删除按钮），它将打开一个引导模态窗口并获取其他{{1它所属的行。这是图像。

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

td

我尝试将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"); } 放在onclick td上，但只有模态工作不是我正在使用的函数：

data-toggle="modal" data-target="#mymodal"

Answer 1

你想要这样的东西：

$('.item_code, .item_name, .item_qtty, .item_cost').click(function() {
  $('.modal-body').html($(this).closest('tr').html());
  $('#myModal').modal('show');
});

td {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="dynamic_added">
  <tbody>
    <tr>
      <td class="item_code">code_1</td>
      <td class="item_name">name_1</td>
      <td class="item_qtty">qtt_1</td>
      <td class="item_cost">cost_1</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
    <tr>
      <td class="item_code">code_2</td>
      <td class="item_name">name_2</td>
      <td class="item_qtty">qtt_2</td>
      <td class="item_cost">cost_2</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
    <tr>
      <td class="item_code">code_3</td>
      <td class="item_name">name_3</td>
      <td class="item_qtty">qtt_3</td>
      <td class="item_cost">cost_3</td>
      <td>
        <button class="btn remove-button">X</button>+</td>
    </tr>
  </tbody>
</table>


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 2

我刚解决了我自己的问题只是一个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");
}

如果我点击按钮的任何地方除了按钮它会弹出模态并传递该行的当前数据。

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