JavaScript 在点击时生成新的输入字段

Question

我正在制作一个 HTML 表格，让用户有不同的选择。我正在尝试制作一个按钮，无限生成一个新的 set op 输入字段，名称增加，例如：第一个生成的输入应具有名称 input1。下一个名称为 input2 等等。

这是一个视觉示例：https://webmshare.com/ZBvw0

如何实现？

Answer 1

您可以使用 jquery 获取 last 项的名称。

然后就可以使用javascript string replace的方法，把'input'换成''，就可以得到最后一项的编号了。

然后只需将它加 1。您必须 parse it as an integer 才能加 1。

然后使用递增的数字，创建一个新的输入字段并append it到您的容器。

Answer 2

您可以通过动态创建表单元素并将它们附加到 form 元素来解决此问题。

下面是一个简化的例子，只是为了说明主要思想。

这里的要点是：

Document.createElement() - 创建指定的 HTML 元素（在本例中为您的表单元素）。

Node.appendChild() - 将一个节点添加到指定父节点（在本例中为您的表单元素）的子节点列表的末尾。

(function() {
  var counter = 0;
  var btn = document.getElementById('btn');
  var form = document.getElementById('form');
  var addInput = function() {
    counter++;
    var input = document.createElement("input");
    input.id = 'input-' + counter;
    input.type = 'text';
    input.name = 'name';
    input.placeholder = 'Input number ' + counter;
    form.appendChild(input);
  };
  btn.addEventListener('click', function() {
    addInput();
  }.bind(this));
})();

input{
  display: block;
}

<form id="form" action="">
</form>
<button id="btn" type="button">Click Me!</button>

Answer 3

试试这个

HTML

<div id="demo">
</div>
<input type="button" id="add" value="Add input"/>

Javascript

var num = 1;
document.getElementById('add').addEventListener("click",addInput);

function addInput(){
var demo = document.getElementById('demo');
demo.insertAdjacentHTML('beforeend','<div class="form-holder" style="width: 30%;"><a class="form-label">Billet type</a> <br><select name="ttype'+num+'"><option value="normal">Standard Billet</option><option value="add-on">Tilkøbs Billet</option></select></div><div class="form-holder" style="width: 31%; margin-left: 0.6%;"><a class="form-label">Billet navn</a> <br><input name="tname'+num+'" type="text" placeholder="F.eks. Entré Billet" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%; margin-left: 1%;"><a class="form-label">Antal</a> <br><input name="tquan'+num+'" type="text" placeholder="F.eks. 500" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%;"><a class="form-label">Pris (DKK)</a> <br><input name="tprice'+num+'" type="text" placeholder="F.eks. 100" style="width: 100%;" /></div> <br>');
 num++;
}

查看 jsFiddle example

JavaScript 在点击时生成新的输入字段

JavaScript generate new input field on click

javascript

forms

button

dynamically-generated