Question

我使用以下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");

有什么建议吗？

Answer 1

看起来您正在构建表单验证脚本。这是一种更简单的方法：

1）在你的stlyesheet中为你的错误类创建一个条目。添加和删除类所需的步骤比单独分配属性所需的步骤少。

.error {
    background-color: #ff0000;
}

2）例如，给你想要验证的所有文本框一个唯一的类名“valMe”。

3）然后在验证步骤中循环遍历它们：

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

通过使用“this”，您可以引用当前元素，因此您甚至不需要知道元素的ID。

Answer 2

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

var errorTextboxName = 'Textbox1';
$('#' + errorTextboxName).css('background-color', 'red');

Answer 3

我最终选择了以下内容：

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

我原本不认为我能够以这种方式捕获我的“Textbox1”控件，因为当我查看html源代码时，由于我动态创建了它，所以没有“Textbox1”。

感谢。

如何更新动态输入控件的背景颜色？

3 个答案: