javascript - 如何在点击时顺序创建表格？

因此，我想按顺序填充表，就像单击表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;隐藏所有表，然后显示它们，并在单击相应按钮后将它们追加到父节点：

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>

关于javascript - 如何在点击时顺序创建表格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61370498/