jquery动态控件创建显示错误

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
        });
    }
});
});

在这里，我创建了一些动态创建组件的函数，并且在 switch 情况下，我正在检查条件，如果组件是标签，那么组件变量将采用文本字段，但我没有得到任何东西，而不是错误也只是“未定义”。

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

您正在使用不在范围内的“组件”变量，因此它给出了错误。 组件应该是全局声明的，或者应该在范围内使用。