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

3 个答案: