0

JavaScript を使用してテーブルに行を動的に追加しています。各行にいくつかのテキスト ボックスを作成し、テキスト ボックスの 1 つに onkeyup イベントを追加しました。

               var myTotal = "1";
           var spanTotal = document.createElement("span");
           spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";


spanCount.onkeyup = function ()
{
alert(spanTotal.innerHTML);
    };

次に、このスパン (HTML テキスト ボックスとしてレンダリングされる) をテーブルの行に追加します。動的に作成されたテキスト ボックスの値を取得したいのですが、このテキスト ボックスを変更するたびに、このテキスト ボックスの初期値がアラート ボックス (つまり 1) に表示されます。このテキストボックスの初期値は「1」ですが、変更すると (たとえば、テキストボックスに 0 を入力すると)、アラート ボックスに再び「1」が表示されます。動的に作成されたテキストボックスの値を取得したいのですが、スパンに ID を与える必要がありますか? spanCount.onkeyup 関数をどのように定義すればよいですか? このテキストボックスの正確な値を取得できるようにするには、どこで定義する必要がありますか?

4

2 に答える 2

1

以下の変更されたコードは、問題を解決できる可能性があります。

var myTotal = 1;

/* object creation */
var span = document.createElement('span');

var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'total');
input.setAttribute('style', 'width:50px;');
input.setAttribute('value', myTotal);

// append each object to respective container
span.appendChild(input);
document.appendChild(span);

/* event handler */
input.onkeyup = function(){
  alert(this.value);
}
于 2012-10-04T12:44:47.433 に答える
1

jsFiddleを作成しました。childNodes を使用して入力ボックスの値を取得できます。spanCountの代わりに使用していたコードには、他にも問題がありますspanTotal。

変更されたコード:

var myTotal = "1";
var spanTotal = document.createElement("span");
spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";
document.body.appendChild(spanTotal);

spanTotal.onkeyup = function() {
    alert(spanTotal.childNodes[0].value);
};​
于 2012-10-04T12:34:35.750 に答える