1

我在 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 事件每次调用此函数时都会被覆盖，不知道为什么。有任何想法吗？

任何帮助，将不胜感激！

4

2 回答 2

1

这是一个关闭问题，您在所有点击处理程序中使用相同的变量。相反，您可以在设置单击事件时使用具有全局变量值的局部变量。

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);
}
于 2013-01-03T03:35:19.853 回答
0

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

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

正在更新参考。

于 2013-01-03T03:35:43.423 回答