0

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>');
Calawn
  • 1
  • 1
  • 1

2 Answers2

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.

rdimaio
  • 325
  • 2
  • 3
  • 15
ankit
  • 1,114
  • 1
  • 19
  • 35
0

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

Community
  • 1
  • 1
Hodrobond
  • 1,665
  • 17
  • 18