動的フォームの選択リストであるフィールドを持つ行を追加/削除する

Question

こんにちは、2番目と3番目の行などを追加できる動的フォームを作成しようとしています。 、テキスト）。これまで私がこれまで行ってきたことはありますが、それはうまくいかず、誰でもこの問題を解決する方法を知っていますか？ありがとうございました！

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

あなたがdivタグを使用している、そしてそれは機能insertRowを持っていません。 insertRow関数を使用する場合は、<div id="myRow">の代わりに<table id="myRow">タグを使用する必要があります。 tableを使ってhtmlを変更したくない場合は、独自のinsertRowとinsertRow関数を記述する必要があります。