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

正在更新參考。