用bootstrap设计一个弹框，然后在弹框里面生成表格
<html> <head> <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css"/> <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script> </head> <body> <div id="test"> <button id="button" class="btn btn-default" style="margin-left: 100px; margin-top: 100px;">click me to show</button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> add body content here <table class="table"> <tbody id="t-body"> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(function () { $("#button").click(function () { $('#exampleModal').modal('show'); $('#t-body').empty(); var $r1 = $('<tr></tr>'); $r1.append($('<td>1</td>')); $r1.append($('<td>2</td>')); $('#t-body').append($r1); var $r2 = $('<tr></tr>'); $r2.append($('<td>1</td>')); $r2.append($('<td>2</td>')); $('#t-body').append($r2); }); }); </script> </body> </html>
var $r1 = $('<tr></tr>');就是生成一个元素，append就是当成子元素并附加在后面。