动态添加行时计数器的增量

Increment of counter on dynamic addition of rows

本文关键字：计数器 添加行 动态      更新时间：2023-09-26

我正在尝试动态添加行以及计数器的自动增量。我想从 1 开始，然后 2 然后 3，依此类推.我已经在 plunker 上添加了我的代码，其中每次最大值都在第一列中出现，例如 4，然后是 1,1,2,3.我哪里出错了？我希望它是 1,2,3,4。

这是 plunker 链接 http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview

            var _counter = 0;           
        function Add() {
            _counter++;
            var oClone = document.getElementById("template").cloneNode(true);
            oClone.id += (_counter + "");
            document.getElementById("placeholder1").appendChild(oClone);
            document.getElementById("myVal").value=_counter;
        }
    <div id="placeholder1">
    <div id="template">
        <div>
        Value:<input type="text" id="myVal" placeholder="1">
        Quantity:<input type="text" placeholder="Qty">
            <input type="button" onClick="Add()" value="Click! ">
        </div>
    </div>

我认为这是因为您有多个div 带有 id="myVal"。 id 属性在网页上应该是唯一的。 否则，您的页面仍将加载，但您可能会遇到意外行为。

您正在更改模板div 的 id，但不会更改 myValdiv。

我假设你正在寻找这样的东西：

var _counter = 0;
function Add() {
  _counter++;
  var oClone = document.getElementById("template").cloneNode(true);
  oClone.id += (_counter + "");
  document.getElementById("placeholder1").appendChild(oClone);
  oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
  <div id="template">
    <div>
      Value:
      <input type="text" class="myVal" placeholder="1">Quantity:
      <input type="text" placeholder="Qty">
      <input type="button" onClick="Add()" value="Click! ">
    </div>
  </div>
</div>

在原始版本中，您正在克隆具有相同输入id的模板。因此，当您执行document.getElementById("myVal").value=_counter;时，您只会获得第一个输入。我将其更改为使用 class 并获取具有相应类的输入，该类是克隆节点的子级。

相关文章：