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

Question

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

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/