添加/刪除行是動態表單中的選擇列表

嗨我想創建一個動態表單，您可以在其中添加第二行和第三行等，並保持與第一行相同的屬性（選擇列表，文字）。這是我到目前爲止，但它不工作，任何人都知道如何解決這個問題？謝謝！添加/刪除行是動態表單中的選擇列表

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++; 

}

來源

2017-07-15 Zach

您使用div標記，它沒有功能insertRow。如果你想使用insertRow功能，你應該使用<table id="myRow">標籤，而不是<div id="myRow">。如果你不想改變你的html使用table比你應該寫你自己的insertRow和insertRow功能。

來源

2017-07-15 23:24:16 qiAlex

添加/刪除行是動態表單中的選擇列表

回答

相關問題