我正在 js 中生成一个表,并对某些 header 使用如下函数:
function generateTableHeader(table) {
var tr = document.createElement('tr');
var th = document.createElement('th');
th.onclick = function(){
toggleHidden("hide_header_" + table_count);
};
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
table.appendChild(tr);
}
我的切换隐藏函数只是隐藏“hide_header_{some number}”类的所有元素。效果很好。
问题是,我多次调用此generateTableHeader函数,为多个表创建 header - 每次调用它时table_count(全局变量)都会递增,并且我期望此函数仅隐藏具有其编号的元素类onclick 事件被创建。相反,每当我单击任何标题时,它们总是隐藏最后创建的元素。
该函数被调用 4 次,在 4 个不同的表中创建 4 个表头 - 每个表都有一列具有正确类名的 td(即“hide_header_1”、“hide_header_2”等)。当我单击第一个标题时,第四个表列被隐藏/显示。当我单击第二、第三或第四列时,仍然只有第四列被隐藏/显示。我希望每次点击都只隐藏该表中的 td。
就好像我正在创建的 th onclick 事件在每次调用此函数时都被覆盖,不知道为什么。有什么想法吗?
如有任何帮助,我们将不胜感激!
最佳答案
这是一个关闭问题,您在所有点击处理程序中使用相同的变量。相反,您可以在设置点击事件时使用局部变量和全局变量的值。
function generateTableHeader(table) {
var tr = document.createElement('tr');
var th = document.createElement('th');
var local_table_count = table_count;
th.onclick = function(){
toggleHidden("hide_header_" + local_table_count);
};
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
table.appendChild(tr);
}
关于javascript - 在javascript中将onclick事件添加到新创建的表头中,但是onclick函数被添加到页面上的所有内容中,而不仅仅是我想要的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14132634/