JavaScript输出未正确迭代

Question

我正在使用javascript克隆一行，然后重命名元素ID并将值之一递增1。这不是我正在使用的实际代码，而是一个显示问题的通用示例。

• 它将所有内容附加到我行的顶部，而不是下面
• 它增加一到两次然后停止

我得到的输出是：

• 10022018
• 10032018
• 10032018
• 10032018
• 10032018
• 10012018

我期望的是：

• 10012018
• 10022018
• 10042018
• 10052018
• 10062018
• 10072018

    <table id = "myTable">
    <tr id="myRow">
    <td>First cell <input type="text" id = "input" value = "10012018"></td>
    
    
    </tr>
    </table><br>

    <button onclick="myFunction()">Try it</button>
    

    <script>
    function myFunction() {
	var i;
    for(i=0; i<5;i++){
	var row=document.getElementById("myRow");           
	var cln = row.cloneNode(true);
    
    row.id = "rows" + i;
    var inpa = document.getElementById("input");
	inpa.id = "input" + i;                      

	var a = parseFloat(document.getElementById("input0").value);
    inpa.value = (a + 10000);                          
                      
	document.getElementById("myTable").appendChild(cln);
    }
    }
    </script>

Answer 1

编辑

罗宾·齐格蒙德补充说，input0是罪魁祸首，并且没有增加（已纠正，但我无法解释）。

var a = parseFloat(document.getElementById("input0").value); // Should be "input"

---

inpa.value = (a + (10000)); // Needs increment ...a + (10000 * i));

我的解释是指对row的分配。

row.id = "rows" + i;  /* This assigns a new #id to the original not a clone
 -- changed to `cln.id` */

---

使用for循环时，请利用增量变量。创建克隆后，您的引用仍指向原始副本，并且没有使用它来增加任何内容，因此这就是复制而未进行的原因。

---

演示

演示中评论的详细信息

<table id="xTable">
  <tr id="xRow">
    <td>First cell <input type="text" id="input" value="10012018"></td>


  </tr>
</table><br>

<button onclick="xFunction()">Try it</button>


<script>
  function xFunction() {

    // In for loops declare i with let inside loop
    // Start with 1 instead of 0 because you cloned the increment starting at 1000
    for (let i = 1; i < 5; i++) {

      var row = document.getElementById("xRow");

      var cln = row.cloneNode(true);

      // You are dealing with the clone not the original anymore
      // Use i form increments
      cln.id = "rows" + i;

      // Target the clone specifically
      // Use querySelector() to get #id, .class, or <tag>
      var inpa = cln.querySelector("input");

      // Once again var i to increment
      inpa.id = "input" + i;

      var a = parseFloat(document.getElementById("input").value);

      // Remember i to increment but this is a little trickier
      inpa.value = (a + (10000 * i));

      document.getElementById("xTable").appendChild(cln);
    }
  }
</script>

Answer 2

编号必须唯一。将 class 应用于tr和input。

通用解决方案

// n -> How many?
// start -> Start value
// index -> Index of value that should be incremented
// id -> Table id
function addRows(n, start, index, id) {
  var table = document.getElementById(id);
  for (var i = 2; i <= n + 1; i += 1) {
    var arr = start.split("");
    arr[index] = i.toString();
    var incremented = arr.join("");
    var tr = table.insertRow(-1);
    tr.className = "row-" + i;
    var cell = tr.insertCell(-1);
    cell.textContent = "Cell ";
    var span = document.createElement("span");
    span.textContent = i + ": ";
    var input = document.createElement("input");
    input.className = "input-" + i;
    input.value = incremented;
    cell.appendChild(span);
    cell.appendChild(input);
  }
}

<table id="myTable">
  <tr class="row-1">
    <td>Cell <span>1: </span><input type="text" class="input-1" value="10012018"></td>
  </tr>
</table><br>

<button onclick="addRows(5, '10012018', 3, 'myTable')">Try it</button>

<hr>

<table id="mySecondTable">
  <tr class="row-1">
    <td>Cell <span>1: </span><input type="text" class="input-1" value="14444"></td>
  </tr>
</table><br>

<button onclick="addRows(8, '14444', 0, 'mySecondTable')">Try it</button>