如何在引导模式中的表中附加行

Question

I have a bootstrap modal . Now I want to append a new row in my table that stand on modal body.

I can append any html content in my modal body but cant append in table. I am trying with this but not work.

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

Answer 1

This is example of bootstrap-modal and table with in. Append row working proper here.

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

May this code help you.

Answer 2

try using after instead of append:

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

Alternatively you may also try using append a little differently:

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

possibly related/dupe: Add table row in jQuery