时间戳

首页 > 解决方案 > 如何在点击时按顺序创建表格？

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>

标签： javascripthtmlcssdom

解决方案

您可以为此使用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>

推荐阅读