无法在twitter引导中将表格的内容呈现给模态？

Question

这里是我的CODE IN _new.html.erb

<div class="container"> 
<hr> 
<div class = "row"> 
<div class = "span9"> 
    <div class = "well"> 
     <%= form_for (@replication) do |f| %> 
     <table> 
    <tr> 
    <td> 
     <%= f.label :SR_NO %> 
    </td> 
    <td> 
     <%= f.text_field :sr_no , :id => "txt_RegionName" %> 
    </td> 
</tr> 
<tr> 
    <td> 
    <%= f.label :Particular %> 
    </td> 
    <td> 
    <%= f.text_area :particular , :id => "txt_Region" %> 
    </td> 
</tr> 
<tr> 
    <td> 
    <%= f.label :Unit %> 
    </td> 
    <td> 
    <%= f.text_field :unit ,:id => "txt_Regio" %> 
    </td> 
    </tr> 
    <tr> 

    <td> 
    <%= f.label :Required_Quantity %> 
    </td> 
    <td> 
    <%= f.text_field :quantity ,:id => "txt_Regi" %> 
    </td> 
    </tr> 
    <tr> 
    <td></td> 
    <td> 
    <table> 
    <tr><td> 
    <input type="button" name="add" id="btn_AddToList" value="add"  class="btn btn-primary" /> 
    </td><td><input type="button" name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" /> 
    </td></tr> 
    </table> 
    </td> 
</tr> 

</table> 
<% end %> 
<table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 
<tr> 
<td>SR_NO</td> 
<td>Item Name</td> 
<td>Particular</td> 
<td>Cost</td> 
</tr> 
</table> 
<input type="button" id= "submit" value="Submit Repication" class="btn btn-success" data-toggle="modal" data-target="#myModal" /> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 

    <h4 class="modal-title" id="myModalLabel"><center>REPLICATION SLIP</center></h4> 
    </div> 
    <div class="modal-body"> 
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 

</table> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</div> 
</div> 

MY JS

$(document).ready(function() {  
$('#submit').prop('disabled', true).removeClass("btn btn-success").addClass("btn btn-default"); 
$('#btn_AddToList').click(function() { 
$('#submit').prop('disabled', true).removeClass("btn btn-warning").addClass("btn btn-default"); 
var val = $('#txt_RegionName').val(); 
var val2 = $('#txt_Region').val(); 
var val3 = $('#txt_Regio').val(); 
var val4 = $('#txt_Regi').val(); 
$('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>'); 
$('#txt_RegionName').val('').focus(); 
$('#txt_Region').val(''); 
    $('#txt_Regio').val(''); 
    $('#txt_Regi').val(''); 
$('#btn_AddToList1').click(function() { 
    $('#submit').prop('disabled', false).removeClass("btn btn-default").addClass('btn btn-warning'); 
}); 
    }); 
}); 

代码的作品，但我想，当我在submit replication按钮表的内容应在modal点击。如何渲染我没有得到模态内的表格。

谢谢。

Answer 1

首先添加表div内，并给它一个ID /类

<div id="table-lst-regions">  
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 
     <tr> 
      <td>SR_NO</td> 
      <td>Item Name</td> 
      <td>Particular</td> 
      <td>Cost</td> 
     </tr> 
    </table> 
</div> 

，因为现在u想添加表中的模态时ü点击提交复制，U可以做到这一点通过引导模态事件http://getbootstrap.com/javascript/#modals

在你的js添加

$('body').on('shown.bs.modal', '#myModal', function() { 
    $(".modal-body").html($("#table-lst-regions").html()); 
}); 

ü可以参考上面的链接了解更多的模态事件。