Question

我想将Rows添加到已存在的表中，每行都有一个onclick属性。问题是每行需要使用另一个参数调用该函数。此刻，无论在哪一行，我点击该函数都会使用表格中最后一行的参数调用。

这是我将行添加到表中的方式：

table = document.getElementById('ProgramTable');
table.style.visibility = "visible";
tableBody = document.getElementById('ProgrammTableBody');
tablelength = jsonObj0.data.map.programs.length;
// Check if there is already a Table, if so
// remove the Table

if (tableexists) {
    removetable();
}

for ( var i = 0; i < tablelength; i++) {
    channel = jsonObj0.data.map.programs[i].programServiceName;
    frequency = jsonObj0.data.map.programs[i].programIdentifier;
    imagelink = "../image/image.jsp?context=tuner&identifier="
        + channel;
    var row = document.createElement("tr");
    row.setAttribute("id", i);

    row.onclick = function() {
        tuneProgram(frequency)
    };
    var channelCell = document.createElement("td");
    var imageCell = document.createElement("td");
    var imageElement = document.createElement("IMG");
    var frequencyCell = document.createElement("td");
    channel = document.createTextNode(channel);
    frequency = document.createTextNode(frequency);
    channelCell.appendChild(channel);
    frequencyCell.appendChild(frequency);
    imageElement.setAttribute("src", imagelink);
    imageElement.setAttribute("width", "40");
    imageElement.setAttribute("height", "40"); // TODO OnError
            // hinzufügen und evtl
            // Css Style für Texte
            // siehe Tabellencode
    imageCell.appendChild(imageElement);
    row.appendChild(channelCell);
    row.appendChild(frequencyCell);
    row.appendChild(imageCell);
    tableBody.appendChild(row);
    }

因此应该使用特定频率参数调用tune函数，但看起来他每次都会覆盖onclick参数，因此最后一个参数位于每一行。但为什么会这样呢？他是否将onclick属性添加到该表中的每一行？我不明白。

感谢您的帮助！

Answer 1

你需要做这样的事情：

for (var i = 0; i < tablelength; i++) {
   (function(i) {
      //your code here
   })(i);
}

Answer 2

替换

row.onclick = function() { 
    tuneProgram(frequency) 
};

与

row.onclick = (function(frequency) {return function() {tuneProgram(frequency);};})(frequency);

通过为它创建一个新的闭包来“锚定”frequency的值。

Answer 3

单击时会引用频率 - 因此，如果变量发生更改，则会更改每个单击元素。例如，第一行设置频率为1，最后一行设置频率为2。当onclick运行时，它不会引用一个值，它引用链中的变量并获得当前值2。

Answer 4

因为你的频率是一个全局值，所以每个函数只引用一个频率;你可以将它缓存在一个闭包中像这样的东西：

var programTable = document.getElementById('ProgramTable');
programTable.style.visibility = "visible";
programmTableBody = document.getElementById('ProgrammTableBody');
tablelength = jsonObj0.data.map.programs.length;

if (tableexists) {
    removetable();
}

function newTabRow ( table, name, identifier ) {
    var link = "../image/image.jsp?context=tuner&identifier=" + name,
    row = table.insertRow();
    row.innerHTML = '<td>' + name + '</td><td><img width="40" height="40" src="'+link+'" alt="''" /></td><td>'+ identifier +'</td>';
    row.onclick = function  (  ) {
        tuneProgram ( identifier );
    }
}
for (var i = tablelength; i-- > 0; ) {
    program = jsonObj0.data.map.programs[i];
    newTabRow ( programTable, program.programServiceName, program.programIdentifier );
}

Answer 5

小心我的页面顶部有一个名为“show_field_setting”的功能。我的功能变得有价值并做一些事情。我有一个for循环，在我的循环中，我为每个元素更改'type'和'id'。你可以看到我的for循环中的一个部分。最后我将我的新元素添加到我的div中，元素id为'my_element_id'。如果要为创建的元素设置函数，则需要使用以下内容：

var new_child = document.createElement('div');new_child.id = id;
new_child.href = "javascript:;";
new_child.onclick = (function (type, id) {
    return function() {
    show_field_setting (type, id);
    };
})(type, id);
document.getElementById('my_element_id').appendChild(new_child);

如果您只在函数中使用参数，请使用：

var new_child = document.createElement('div');
new_child.href = "javascript:;";
new_child.onclick = (function (your_value) {
    return function() {
    your_function_name (your_value);
    };
})(your_value);
document.getElementById('your_element_id').appendChild(new_child);

最后我不知道为什么。如果你没有像“while”，“for”甚至“switch”那样处于循环状态，你可以使用简单的代码行：

var new_child = document.createElement('div');
new_child.href = "javascript:;";
new_child.onclick = function(){your_function_name (your_value_1, your_value_2 , ...)};
document.getElementById('your_element_id').appendChild(new_child);

玩得开心;）:)）

使用document.createElement动态创建表，并向每个tr添加onclick函数

5 个答案: