0

次のJavaScriptを使用して、いくつかの動的入力テキストボックスを正常に作成しています。

var type = "Textbox";
var foo = document.getElementById("fooBar");

for (i = 1; i <= totalQty; i = i + 1) {

    var textbox = document.createElement("input");
    //Assign different attributes to the element.
    textbox.setAttribute("type", type + i);
    //textbox.setAttribute("value", type + i);
    textbox.setAttribute("name", type + i);
    textbox.setAttribute("id", type + i);
    textbox.setAttribute("style", "width:300px");
    textbox.setAttribute("width", "300px");

    //Append the element in page (in span).
    var newline = document.createElement("br");
    foo.appendChild(newline);
    foo.appendChild(textbox);
}

それですべてがうまくいきます。ただし、ユーザーがデータを入力して[送信]をクリックしたら、戻ってエラーのあるテキストボックスの背景色を赤に設定する必要があります。私は実際の着色を行うためのいくつかのコードを見つけました：

textbox.style.backgroundColor = "#fa6767";

...エラーのあるテキストボックスの正確な名前（つまり、「Textbox1」、「Textbox2」、「Textbox3」など）はわかっていますが、この背景色コードを特定のテキストボックスにプログラムで割り当てる方法がわかりません。すべてのコードが動的に生成されるため、このようなものを使用することはできません。

errorTextbox = $("#Textbox1");

助言がありますか？

4

3 に答える 3

2

フォーム検証スクリプトを作成しているようです。これを行う簡単な方法を次に示します。

1) スタイルシートにエラー クラスのエントリを作成します。クラスの追加と削除に必要な手順は、プロパティを個別に割り当てるよりも少なくなります。

.error {
    background-color: #ff0000;
}

2) たとえば、一意のクラス名「valMe」を検証するすべてのテキスト ボックスを指定します。

3) 次に、検証ステップでそれらをループします。

 $('.valMe').each(function() {
           $(this).removeClass('error');
           if($(this).text=='') {
               $(this).addClass('error');
           }
    })

「this」を使用すると、現在の要素を参照できるため、要素の ID を知る必要さえありません。

于 2012-09-18T15:08:15.240 に答える
0

私は次のように行きました：

document.getElementById('Textbox1'.style.backgroundColor = "#fa6767";

HTMLソースコードを表示したとき、動的に作成したため「Textbox1」がなかったため、この方法で「Textbox1」コントロールをキャプチャできるとは当初考えていませんでした。

ありがとう。

于 2012-09-19T14:48:47.870 に答える
0

name要素の(この場合は と同じ)が既にわかっている場合idは、文字列連結を使用してセレクターを形成することにより、jQuery を使用して要素を選択できます。nameエラーが発生したテキスト ボックスの/を格納する変数があると仮定するとid、それは比較的単純なプロセスです。

var errorTextboxName = 'Textbox1';
$('#' + errorTextboxName).css('background-color', 'red');
于 2012-09-18T15:41:04.167 に答える