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_{somenumber}」のすべての要素を非表示にするだけです。正常に動作します。

問題は、このgenerateTableHeader関数を数回呼び出して、複数のテーブルのヘッダーを作成することです-呼び出されるたびに、table_count（グローバル変数）がインクリメントされ、この関数がonclickイベントのときに持っている数の要素のクラスのみを非表示にすることを期待していました創造された。代わりに、ヘッダーのいずれかをクリックすると、最後に作成された要素が常に非表示になります。

この関数は4回呼び出され、4つの異なるテーブルに4つのテーブルヘッダーが作成されます。各テーブルには、正しいクラス名（つまり、「hide_header_1」、「hide_header_2」など）を持つtdの列があります。最初のヘッダーをクリックすると、4番目のテーブル列が非表示/表示されます。2番目、3番目、または4番目をクリックしても、4番目の列のみが非表示/表示されます。クリックするたびに、そのテーブルの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 に答える