将onclick事件添加到javascript中新创建的表格标题中，但是onclick函数被添加到页面上的所有内容中，而不仅仅是我想要的一个

Question

我在js中生成一个表，并对某些标头使用如下功能：

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函数，为多个表创建了标题-每次调用table_count（全局变量）时都会递增，并且我希望此函数仅隐藏具有onclick事件时具有的元素数的元素类被建造。 相反，每当我单击任何标题时，它们始终会隐藏最后创建的元素。

该函数被调用4次，以在4个不同的表中创建4个表头-每个表头都有一列带有正确类名的td（即“ hide_header_1”，“ hide_header_2”等）。 当我单击第一个标题时，第四个表列被隐藏/显示。 当我单击第二，第三或第四时，仍然仅隐藏/显示第四列。 我希望每次单击都只隐藏该表中的td。

好像我每次调用此函数时正在创建的onclick事件都被覆盖，不确定为什么。 有任何想法吗？

任何帮助，将不胜感激！

Answer 1

这是一个关闭问题，您在所有点击处理程序中都使用了相同的变量。 而是可以在设置click事件时将局部变量与全局变量的值一起使用。

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

Answer 2

我认为答案可能在您自己的描述中。 table_count是全局变量。 每次将其递增时，该行中所有事件侦听器都在使用该引用：

th.onclick = function(){
    toggleHidden("hide_header_" + table_count);
};

正在更新参考。