Question

我有一个自举模式。现在我想在我的表格中添加一个新行，它位于模态体上。

我可以在我的模态体中附加任何html内容，但不能附加在表格中。我正在尝试这个但不行。

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

Answer 1

这是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>

这段代码可以帮助你。

Answer 2

尝试使用after而不是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

如何在bootstrap模式中的表中追加行

2 个答案: