Стол с формой - PullRequest
Новая
       24

Стол с формой

0 голосов
/ 01 октября 2019

У меня проблема с этим упражнением. Я должен убедиться, что когда я нажимаю кнопку, в таблице появляется другая строка с теми же формами, которые я вставил в первую. Мне удалось поставить строку, но я не знаю, как добавить форму, поскольку при добавлении строки появляется только надпись. 

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<center>
<br>
<table border="1" align="center" width="45%" id="tabella">
<tr id="tr1">
<td width="25%" id="td1">
 <br>
  <div class="form-group">
    <label for="Nome">Nome</label>
    <input type="Nome" id="nome">
  </div>
</td>
<td width="25%">
 <br>
  <div class="form-group">
    <label for="Cognome">Cognome</label>
    <input type="Cognome">
  </div>
</td>
<td width="25%">
 <br>
  <div class="form-group">
    <label for="Nome">Nome</label>
    <input type="GG" placeholder="GG" style="width:50px">-<input type="MM" placeholder="MM" style="width:50px">-<input type="AAAA" placeholder="AAAA" style="width:50px">
  </div>
</td>
</tr>
</table>
<br>

<script>
function aggiungi() {
  var table = document.getElementById("tabella");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML
  //these three are the ones I think I have to change to add the form 
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
  cell3.innerHTML = "NEW CELL3";
}
</script>

<input type="button" value="Clicca per aggiungere una riga" onclick="aggiungi()">
</center>
</body>
</html>

1 Ответ

0 голосов
/ 01 октября 2019

Попробуйте что-то вроде этого ... я не уверен, что новые идентификаторы работают так, но идентификаторы должны быть однозначными ... вот почему я добавил, например, id = "nome _ '+ index +' 

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<center>
<br>
<table border="1" align="center" width="45%" id="tabella">
<tr id="tr1">
<td width="25%" id="td1">
 <br>
  <div class="form-group">
    <label for="Nome">Nome</label>
    <input type="Nome" id="nome">
  </div>
</td>
<td width="25%">
 <br>
  <div class="form-group">
    <label for="Cognome">Cognome</label>
    <input type="Cognome">
  </div>
</td>
<td width="25%">
 <br>
  <div class="form-group">
    <label for="Nome">Nome</label>
    <input type="GG" placeholder="GG" style="width:50px">-<input type="MM" placeholder="MM" style="width:50px">-<input type="AAAA" placeholder="AAAA" style="width:50px">
  </div>
</td>
</tr>
</table>
<br>

<script>
var index = 0;
function aggiungi() {
  var table = document.getElementById("tabella");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML
  //these three are the ones I think I have to change to add the form 
  cell1.innerHTML = '<div class="form-group"><label for="Nome">Nome</label><input type="Nome" id="nome_'+index+'"></div';
  cell2.innerHTML = '<div class="form-group"><label for="Cognome">Cognome</label><input type="Cognome_'+index+'"></div>';
  cell3.innerHTML = '<label for="Nome">Nome</label><input type="GG" placeholder="GG" style="width:50px">-<input type="MM" placeholder="MM" style="width:50px">-<input type="AAAA" placeholder="AAAA" style="width:50px">';

    index++;
}
</script>

<input type="button" value="Clicca per aggiungere una riga" onclick="aggiungi()">
</center>
</body>
</html>
...