2

これは（Firefoxで）動作します...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="src/myJS.js"></script>
</head>
<body></body>
</html>

Javascript ファイル (便宜上 myJS.js と呼ばれます)

window.onload = function()
{
    CreateInputTable();
};

CreateInputTable = function()
{
    var tbl = document.createElement('table');
    var tbo = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var ib = document.createElement('input');
    ib.setAttribute('type', 'text');

    var tdID = "c1"; // Cell reference

    if (ib.addEventListener)// all browsers except IE before version 9 - see http://help.dottoro.com/ljeuqqoq.php
        {
            ib.addEventListener('change', foo, false);
        }
    else// IE before version 9 - see http://help.dottoro.com/ljeuqqoq.php
        {
            ib.attachEvent('change', foo, false);       
        };

    td1.appendChild(ib);
    tr.appendChild(td1);

    var td2 = document.createElement('td');
    td2.setAttribute('id', tdID);
    td2.appendChild(document.createTextNode("Hello world"));
    tr.appendChild(td2);

    tbo.appendChild(tr);
    tbl.appendChild(tbo);
    document.getElementsByTagName('body')[0].appendChild(tbl);
};

function foo (){
    if (document.getElementById("c1"))
        {
        document.getElementById("c1").appendChild(document.createTextNode(" and goodbye"));             
        }
};

ただし、セル参照「c1」をイベントリスナーに動的に渡したいです。

私がそれを正しく理解していれば、呼び出しを次のように変更することはできません...

ib.addEventListener('change', foo(tdID), false);

fooかっこは、関数としてではなく、の戻り値を返すためfooです。

ただし、tdID の宣言を次のように変更することで動作させることができます。

this.var tdID = "c1";

...そして foo to

function foo (){
    if (document.getElementById(tdID))
        {
        document.getElementById(tdID).appendChild(document.createTextNode(" and goodbye"));             
        }
};

foo私がそれを正しく理解していれば、内で呼び出されるため動作します。CreateInputTableつまり、 内の this 変数を見ることができますCreateInputTable。

ただし、tdID の新しい値を使用して 2 番目の行を作成したいので、これでは必要なものが得られません。上記の例は、セル参照を に単純にハードコーディングしているように見えますfoo。

fooセル参照を(オブジェクト指向スタイルで)動的に渡すにはどうすればよいですか?

4

1 に答える 1

0

エレガントな方法は次のとおりです。

function foo (tdID){
    return function(){
        if (document.getElementById(tdID))
        {
            document.getElementById(tdID).appendChild(document.createTextNode(" and goodbye"));             
        }
    }
};

それからあなたは実際に書くことができます

ib.addEventListener('change', foo(tdID), false);

への呼び出しfoo(tdID9)は正しい数の引数を持つ関数を返し、`tdID' の正しい値を「知っている」ためです。

この手法はカリー化と呼ばれます。

于 2013-01-10T12:41:27.410 に答える