无法将表格的内容呈现到 twitter bootstrap 中的模式？

Question

这是我在_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>

我的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.how 中呈现，我没有在模态框内获得表格。

谢谢。

Answer 1

首先将您的表格添加到 div 中并为其指定 id/class

<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>

现在，当您单击提交复制时，您想在模态中添加表格，您可以使用引导模态事件http://getbootstrap.com/javascript/#modals

在你的js中添加

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

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