Как создать таблицу последовательно по клику? - PullRequest
Новая
       5

Как создать таблицу последовательно по клику?

0 голосов
/ 22 апреля 2020

Итак, я хочу заполнить таблицу последовательно, как если бы я нажимал на кнопку таблицы 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>

1 Ответ

1 голос
/ 22 апреля 2020

Для этого можно использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...