Javascript 添加/删除具有动态形式的拾取列表字段的行

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

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>

---

您使用的是

div

标记，它没有

insertRow

功能。如果要使用

insertRow

功能，应使用

标记，而不是

。 如果不想使用

table

更改html，则应编写自己的

insertRow

和

insertRow

函数

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

}