ブートストラップモーダルでテーブルに行を追加する方法

Question

私はブートストラップモーダルを持っています。今私はモーダルボディに立つテーブルに新しい行を追加したいと思います。

私のモーダルボディに任意のHTMLコンテンツを追加できますが、テーブルに追加することはできません。 私はこれを試していますが、仕事はしていません。代わりにAPPENDの後に使用して

$('#mymodal').find('.modal-body tbody').append('<tr><td>new row<td></tr>'); 

Answer 1

試してみてください。

('#mymodal').find('.modal-body tbody:last-child').after('<tr><td>new row<td></tr>'); 

代わりに、あなたはまた少し違っを追加使用してみてください可能性があります

$('#mymodal').find('.modal-body tbody') 
    .append('<tr>') 
    .append('<td>new row<td>'); 

おそらく関連/デュープ：Add table row in jQuery

Answer 2

このin。Apを含むbootstrap-modalとtableの例ですここで正しい行を保留してください。

$('#myModal').find('.modal-body .table tbody').append('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>');

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- 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"> 
 
      <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>john@example.com</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>mary@example.com</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>july@example.com</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>

このコードはあなたを助けるかもしれません。