ajouter/supprimer des lignes avec des champs qui sont des listes de choix sous une forme dynamique

Question

Salut J'essaie de créer un formulaire dynamique où vous pouvez ajouter une deuxième et troisième rangée, etc, et conserve les mêmes propriétés que la première rangée (liste de sélection , texte). Voici ce que j'ai jusqu'à présent mais ça ne marche pas, quelqu'un sait comment réparer ça? Je vous remercie!

HTML

<form> 
<div id="myRow"> 
    <div class="col-md-1 "> 
     <div class="form"> 
      <div class="form-group"> 
       <label class="form-control-label" for="info_1">Make</label> 
       <select class="form-control" id="info_1"> 
        <option disabled selected>Choose one...</option> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-1 "> 
     <div class="form"> 
      <div class="form-group"> 
       <label class="form-control-label" for="info_2">Model</label> 
       <select class="form-control" id="info_2"> 
        <option disabled selected>Choose one...</option> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-1 "> 
     <div class="form"> 
      <div class="form-group"> 
       <label class="form-control-label" for="info_3">Type</label> 
       <select class="form-control" id="info_3"> 
        <option disabled selected>Choose one...</option> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-2 "> 
     <div class="form"> 
      <div class="form-group"> 
       <label class="form-control-label" for="price">PRICE</label> 
       <div class="input-group"> 
        <span class="input-group-addon">$</span> 
        <input class="form-control" type="number" id="price"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="btnAdd" class="button-add" onclick="insertRow();">add</div> 

JavaScript

var index = 1; 
function insertRow(){ 
      var table=document.getElementById("myRow"); 
      var row=table.insertRow(table.rows.length); 
      var cell1=row.insertCell(0); 
      var t1=document.createElement("input"); 
       t1.id = "info_1"+index; 
       cell1.appendChild(t1); 
      var cell2=row.insertCell(1); 
      var t2=document.createElement("input"); 
       t2.id = "info_2"+index; 
       cell2.appendChild(t2); 
      var cell3=row.insertCell(2); 
      var t3=document.createElement("input"); 
       t3.id = "info_3"+index; 
       cell3.appendChild(t3); 
     index++; 

} 

Answer 1

vous utilisez tag div, et il n'a pas de fonction insertRow. Si vous souhaitez utiliser la fonction insertRow, vous devez utiliser la balise <table id="myRow"> au lieu de <div id="myRow">. Si vous ne voulez pas changer votre code HTML en utilisant table que vous devriez écrire vos propres fonctions insertRow et insertRow.