所以，我想按顺序填充表，就像如果我点击表3按钮，这个表首先生成，然后如果我点击表1，那么表1应该被创建，以此类推......每个表应该是一个一个生成的.如果表3和表1首先被创建，那么它们之间不应该有表2的空间.我试过使用隐藏和可见风格的可见性，但它没有像我期望的那样工作。
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="center">
<button style="margin: 1%;">Table 1</button>
<button style="margin: 1%">Table 2</button>
<button style="margin: 1%">Table 3</button>
</div>
<table id="table1">
<h3> Table 1</h3>
<!-- <tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr> -->
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input>
</input></td>
<td></td>
</tr>
</table>
<table id="table2">
<h3> Table 2</h3>
<!-- <tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr> -->
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input>
</input></td>
<td></td>
</tr>
</table>
<table id="table3">
<h3> Table 3</h3>
<!-- <tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr> -->
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input>
</input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input>
</input></td>
<td></td>
</tr>
</table>
</body>
</html>你可以使用 Node.appendChild() 为此
将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，appendChild()会将其从当前位置移动到新位置。
所以你可以用 display: none; 然后显示出来，一旦点击相应的按钮，就会将它们追加到parrent节点上。
const container = document.getElementById('container');
function show(n) {
const table = document.getElementById(`table${n}`);
table.style.display = 'block';
container.appendChild(table);
}td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
#table1, #table2, #table3 {
display: none;
}<div class="center">
<button style="margin: 1%" onclick="show(1)">Table 1</button>
<button style="margin: 1%" onclick="show(2)">Table 2</button>
<button style="margin: 1%" onclick="show(3)">Table 3</button>
</div>
<div id=container>
<table id="table1">
<th colspan="3">Table 1</th>
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input></td>
<td></td>
</tr>
</table>
<table id="table2">
<th colspan="3">Table 2</th>
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input></td>
<td></td>
</tr>
</table>
<table id="table3">
<th colspan="3">Table 3</th>
<tr>
<td>Seq</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td>
<input>
</td>
<td></td>
</tr>
<tr>
<td>Type</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>Table Name</td>
<td><input></td>
<td></td>
</tr>
</table>
</div>