0

私の質問はjsの専門家にとっては簡単だと思います（私はjsの初心者です）。

私のスクリプトでは、動的にテーブルを作成します。HTMLコードにはボタンがあり、このボタンをクリックしたときにすべてのテーブルセルを色で塗りつぶしたいと思います。テーブルのセルを埋めるための別の機能がありますが、私が遭遇した問題は、ボタンをクリックすると、テーブルの最後のセルだけが埋められることです。テーブルセルがループ内に作成されているため、この問題はクロージャと関係があると思います。

コードは次のとおりです。

HTML：

<button onclick='show()'>Click</button>

JS：

var obj = new Object;

    obj.x = document.createElement('table');
    document.body.appendChild(obj.x);

        for(i=0;i<10;i++){
            obj.y = document.createElement('tr');
            obj.x.appendChild(obj.y);

                for(j=0;j<10;j++){
                    obj.z = document.createElement('td');
                    obj.z.appendChild(document.createTextNode(j));
                    obj.y.appendChild(obj.z);
                }
            }

    function fill(){

        obj.z.style.backgroundColor='red';

    }

//->

4

1 に答える 1

0

for ループが繰り返されるたびに、obj.z は新しいセルによって上書きされます。つまり、最後のセルのみが参照されます。テーブル内のすべてのセルをスタイルする簡単な方法は、それ自体の を変更するだけbackgroundColorです<table>。

これを別の方法で行いたい場合は、セル要素を個別にループし、それぞれにスタイルを適用する必要があります。これを行う簡単な方法は、jQueryclassNameを使用し、プロパティを値に追加して (theTableこの例のように)、次のコードを使用することです。

$('table.theTable td').css('backgroundColor','red');

<td>これにより、クラスtheTable(CSS セレクターを使用) を持つテーブル内のすべての要素が選択され、それらのbackgroundColorCSS プロパティが としてスタイル設定されredます。

于 2012-05-29T09:03:52.000 に答える