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

如果您已经知道元素的name（在这种情况下与 相同id），则可以使用 jQuery 通过使用字符串连接形成选择器来选择元素。假设您有一个变量来存储有错误的文本框的name/ id，那么这是一个相对简单的过程：

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

我最终选择了以下内容：

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

我最初认为我无法以这种方式捕获我的“Textbox1”控件，因为当我查看 html 源代码时，由于我动态创建了它，因此没有“Textbox1”。

谢谢。

于 2012-09-19T14:48:47.870 回答