无法使用Jquery在模式表中添加“编辑”和“删除”按钮？

Question

我想使用jquery在每个<tr>上添加edit和delete按钮，这是我的代码：

html:

<%= form_for (@replication) do |f| %>
      <h2 style = "padding:20px;"><center><u>Replication slip</u></center></h2>
      <table width = "600" margin = "10">
  <tr>
  <td>
      <%= f.label :SR_NO , :style => "padding:10px" %>
  </td>
  <td style = "padding:10px;">
      <%= f.number_field :sr_no , :id => "txt_RegionName" %>
  </td>

  <td>
    <%= f.label :Particular %>
  </td>
  <td style = "padding:10px;">
    <%= f.text_area :particular , :id => "txt_Region" %>
  </td>

  <td>
    <%= f.label :Unit %>
  </td>
  <td style = "padding:10px;">
    <%= f.text_field :unit ,:id => "txt_Regio" %>
  </td>


  <td> 
    <%= f.label :Required_Quantity %>
  </td>
  <td style = "padding:10px;">
    <%= f.text_field :quantity ,:id => "txt_Regi" %>
  </td>
  </tr>
  <tr>
  <td></td><td></td><td></td>
   <td>
 <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
  <input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" /> 
</td></tr> 
</table>
<br />
<center>
 <div id="table-lst-regions"> 
<table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped   table-bordered table-condensed">
 <tr>
 <td ><i class="fa fa-list-ol"></i>  SR_NO  </td>
 <td> <i class="fa fa-align-justify"></i> Particular</td>
 <td><i class="fa fa-shopping-cart"></i>  Unit</td>

 <td><i class="fa fa-chain-broken"></i>Required_Quantity</td>

 </tr>
</table>

</div>
 </center>
<input type="button" id= "submit" value="Submit Repication"  class="btn btn-block btn-lg  btn-primary" data-toggle="modal" data-target="#myModal" style = "margin:20px" />
<% end %>
 <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">
 <h2><center><%= image_tag("bg1.png", :alt => "#", :class => "round" , :width => "100") %>                             <u>Marck BioScience Pvt Ltd.</u>
   </center>
   </h2>
   <h4 class="modal-title" id="myModalLabel"><center><i class="fa fa-clipboard"></i>    <u>REPLICATION SLIP</u></center>   </h4>
  </div>
 <div style = "padding:20px;">
   FROM: <b><%= current_emp.username.capitalize %><b><br/>

  </div>
  <div class="modal-body">

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

js:

$(document).ready(function () {
    $('#submit').prop('disabled', true).removeClass("btn btn-block btn-lg btn-primary").addClass("btn btn-block btn-lg btn-default");
    $('#btn_AddToList').click(function () {
        $('#submit').prop('disabled', true).removeClass("btn btn-block btn-lg btn-info").addClass("btn btn-block btn-lg 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-block btn-lg btn-default").addClass('btn btn-block btn-lg btn-info');
            $('body').on('shown.bs.modal', '#myModal', function () {
                $(".modal-body").html($("#table-lst-regions").html());
            });
        });
    });
});

我想要类似look of buttons例如THIS FIDDLE

Answer 1

试试[这个小提琴] [1]，我为您准备了。

[1]: http://jsfiddle.net/sneh_pandya/gaTes/