j查询动态控件创建显示错误

Question

//control creation
function CreateTextBox(id, type, value, cls) {
$('<Input />', { id: id, type: type, name: 'textbox', value: value, "class": cls });
}
function CreatechkBox(id, type, cls) {
$('<Input />', { id: id, type: type, name: 'checkbox', value: value, "class": cls });
}
function CreateradioBox(id, type, cls) {
$("#radioholder").append($('<Input />').attr({ id: id, type: type, name: 'radiobutton' }).addClass(cls));
}
function CreateButton(id, type, value, cls) {
$("#btnholder").append($('<Input />').attr({ id: id, type: type, value: value }).addClass(cls));
}
function CreateDropDownlist(id, type, value, cls) {
$('<select />');
//$('<option />', { id: id, type: type, name: 'Label', value: value, "class": cls }).appendTo(s);
//$("#btnholder").append($('<Input />').attr({ id: id, type: type, value: value }).addClass(cls));
}
function CreateLabel(id, type, value, cls) {
$("<label>");
//$("#btnholder").append($('<Input />').attr({ id: id, type: type, value: value }).addClass(cls));
}
$(document).ready(function () {
//Ajax called .... get data and bind it into html
$.ajax({
    url: "http://localhost:63945/Home/NewIndex",
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function (result) {
        $.getJSON("http://localhost:63945/Home/NewIndex", function (json) {
            var tr;
            for (var i = 0; i < json.length; i++) { // for loop start
                tr = $('<tr/>');
                var component = '';
                switch (json[i].AttrControlType) {
                    case 'TextBox':
                        component = CreateTextBox('txtBox', 'text', 'text', 'form-control');
                        break;
                    case 'DropDownList':
                        component = CreateDropDownlist();
                        break;
                    case 'Label':
                        component = CreateLabel();
                        break;
                    default:
                        component = "Not Exist";
                }
                tr.append("<td>" + json[i].Pkid + "</td>");
                tr.append("<td>" + json[i].FKid + "</td>");
                tr.append("<td>" + json[i].AttrLabel + "</td>");
                tr.append("<td>" + json[i].AttrColumn + "</td>");
                tr.append("<td>" + component + "</td>");
                tr.append("<td>" + json[i].AttrControlDatatype + "</td>");
                $('table').append(tr);
            } //for loop end
        });
    }
});
});

在这里，我创建

了一些动态创建组件的函数，在开关情况下，我正在检查条件，如果组件是标签，则组件变量将采用文本字段，但我没有得到任何东西，错误也只是"未定义"。

Answer 1

应该是

这样的在 HTML 中创建div 给他们 ID

 <div id="control"></div>

jquery

$(document).ready(function () {
    CreateTextBox("name", "text", "Enter your name", "form-control");    
});
function CreateTextBox(id, type, value, cls) {
    var str="<input type="+type+" id="+id+" value="+value+" class="+cls+" />"
    $("#control").html(str);
}

Answer 2

您需要

在Create函数中添加return语句，如下所示：

function CreateTextBox(id, type, value, cls) {
    return $('<Input />', { id: id, type: type, name: 'textbox', value: value, "class": cls });
}

然后，您还需要更改以下行

tr.append("<td>" + component + "</td>");

到：

tr.append("<td>" + component[0].outerHTML + "</td>");

Answer 3

您正在使用不在范围内的"组件"变量，因此会给出错误。组件应全局声明，或者应在作用域中使用。