Question

我试图动态添加行加上计数器的自动递增。我想从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>

Answer 1

我认为这是因为你有多个id为“myVal”的div。页面上显示The id attribute should be unique。如果没有，您的页面仍会加载，但您可能会出现意外行为。

您正在更改模板div的ID，但不更改myVal div。

Answer 2

我认为你正在寻找这样的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

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

增加动态添加行的计数器

2 个答案: