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

Question

这是添加行的函数的一部分。它就像一个魅力，除了我还希望它向每个新创建的元素集的 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++;}

提前致谢！

Answer 1

变化：

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

至：

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

Answer 2

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

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

的有效语法

Answer 3

改变

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

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

Add counter to ID names in dynamically added rows

javascript

count

add

elements

dynamically-generated