添加/删除具有动态表单中选取列表的字段的行

Question

嗨，我正在尝试创建一个动态表单，您可以在其中添加第二行和第三行等，并且它保持与第一行相同的属性(选项列表，文本(。 这是我到目前为止所拥有的，但它不起作用，有人知道如何解决这个问题吗？ 谢谢！

.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函数，则应使用<table id="myRow">标签而不是<div id="myRow">。 如果您不想使用table更改 html，则应编写自己的insertRow和insertRow函数。