부트 스트랩 모달의 테이블에 행을 추가하는 방법

Question

부트 스트랩 모달이 있습니다. 이제 저는 모달 몸체에 서있는 새로운 테이블을 테이블에 추가하고 싶습니다.

모달 본문에 html 콘텐츠를 추가 할 수 있지만 표에 추가 할 수 없습니다. 나는 이것으로 노력하고 있지만 일하지는 않습니다.

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

Answer 1

시도 후 대신 APPEND의 사용 : 또는

('#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

이를 예를 들어 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>

이 코드 당신을 도울 수 있습니다.