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函数。

使用动态表单中的选择列表字段添加/删除行

1 个答案: