在动态添加的行中向 ID 名称添加计数器答案

【问题标题】：Add counter to ID names in dynamically added rows在动态添加的行中向 ID 名称添加计数器
【发布时间】：2015-04-06 01:47:33
【问题描述】：

这是添加行的函数的一部分。它就像一个魅力，除了我还希望它为每个新创建的元素集的 ID 名称添加一个整数 (+1)。

例如，下面的代码生成一行、一个单元格和一个按钮。如果创建了三行，那么我希望每行的按钮 ID 分别为 foo1, foo2, foo3。

我将如何完成这项工作？

function addrow() {
var i = 1;
var table = document.getElementById("mytable");
var row = table.insertRow(1);
var cell1 = row.insertCell(1);
cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";
i++;}

提前谢谢你！

【问题讨论】：

cell1.innerHTML = "<input type='button' id='foo" +i + "' value='Hello'>";
使用var i = 1; function addrow() { .... cell1.innerHTML = "<input type='button' id='foo"+i +"' value='Hello'>"; i++; }
优秀的答案，我将更新我的结构并在函数之外全局声明我的变量。非常感谢大家。
@john-ruddell 我很乐意，但遗憾的是我的声誉目前低于 15。
无论您的声誉如何，您都应该能够接受答案，因为这是您的问题。这很奇怪......不过我会给你一个赞成票:)

标签： javascript count add elements dynamically-generated

【解决方案1】：

变化：

cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";

到：

cell1.innerHTML = "<input type='button' id='foo" + i + "' value='Hello'>";

【讨论】：

【解决方案2】：

改变

cell1.innerHTML = "<input type='button' id='foo+i' value='Hello'>";

到

cell1.innerHTML = "<input type='button' id='foo"+ i +"' value='Hello'>";

并将i值初始化为全局变量。

使用

var i = 1;
function addrow() { 
  var table = document.getElementById("mytable");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(1);
  cell1.innerHTML = "<input type='button' id='foo"+i +"' value='Hello'>"; 
  i++; 
}

【讨论】：

【解决方案3】：

您需要将字符串与增量变量连接起来，而不是将其放在字符串中。

"<input type='button' id=foo" + i +" value='Hello'>"

但是你需要做的还有很多…… 你需要让你的 i 变量是全局的，这样每次调用这个函数时它都不会被重置

var i = 1;
function addrow() {
    var table = document.getElementById("mytable"),
        row = table.insertRow(i),
        cell1 = row.insertCell(i);
    cell1.innerHTML = '<input type="button" id=foo' + i + ' value="Hello">';
    i++;
}

我还更改了引号，因为单引号不被视为 HTML 的有效语法

【讨论】：