Question

    ![i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format.
i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format. 
i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format.

我正在向您展示一张图片。我想通过使用jquery创建这种类型，但我没有得到我想要的，请帮助我。，我有以下HTML代码，我想通过使用jQuery AJAX请求动态创建。我的回答是JSON格式。我正在向你展示一个图像。我想通过使用jquery创建这种类型，但我没有得到我想要的，请帮助我。，我有以下HTML代码，我想通过使用jQuery AJAX请求动态创建。我的回答是JSON格式。我正在向你展示一个图像。我想通过使用jquery创建这种类型，但我没有得到我想要的，请帮助我。，我有以下HTML代码，我想通过使用jQuery AJAX请求动态创建。我的回答是JSON格式。

        <fieldset data-role="controlgroup" data-type="vertical">
            <legend>Select Locations</legend>
            <input id="checkbox2" name="" type="checkbox"
            />
            <label for="checkbox2">ICU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
            <input id="checkbox3" name="" type="checkbox" />
            <label for="checkbox3">CCU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
            <input id="checkbox4" name="" type="checkbox" />
            <label for="checkbox4">EU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
        </fieldset>

    JSON data looks like this:

        {
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }
        1Object{
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }
        2Object{
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }


    first record looks like this:

        {
            __type:"PatientInfo:#DAAB",
            AcknowledgeComment:null,
            AcknowledgedBy:null,
            DeptId:14,
            DeptName:"GENERAL",
            DeptPhoneNumber:"1234567894",
            ForwardBy:null,
            ForwardComment:null,
            HasECHO:false,
            HasLabReports:false,
            HasLabResults:false,
            HasMR:false,
            HospPhoneNumber:"1234512345",
            IsAlreadyLabSubscribed:false,
            IsEscalatedMessage:false,
            IsEscalationPossible:false,
            IsMessageAcknowledgedBySomeOne:false,
            IsMessageEscalatedBySystem:false,
            IsPrimaryReceiver:true,
            Message:"- ABNORMAL ECG -",
            MessageGenerationDate:"12/20/2012 08:20:24 AM",
            MessageID:768,
            MessageLevel:2,
            MessageStatus:"SENT TO MOBILE",
            MessageStatusID:3,
            MessageType:"EKG",
            PatientFirstName:" 03 ",
            PatientID:"TestPID9480",
            PatientLastName:"Test",
            PatientMiddleInitial:"",
            PatientNamePrefix:"",
            PatientNameSuffix:"",
            RowNumber:1,
            Sender:"Mvisum,",
            SenderId:1,
            Severity:"Level2",
            Subject:"ECG attached for patient - Test, 03 ",
            TotalPatientCount:3,
            UnitId:16,
            UnitName:"Emergency",
            UnitPhoneNumber:"9999999999"
        }


      \[1\]: http://i.stack.imgur.com/Hgnz2.png][1]

Answer 1

假设您的对象是一个包含对象的数组，如下所示：

var data = [
    {
        __type: "PatientInfo:#DAAB",
        DeptId: 14,
        DeptName: "GENERAL"
        //Etc
    }, {
        __type: "PatientInfo:#DAAB",
        DeptId: 14,
        DeptName: "GENERAL"
    } //Etc
];

你有一些像这样的HTML：

<fieldset data-role="controlgroup" data-type="vertical" id="fields">
    <legend>Select Locations</legend>
</fieldset>

然后这将工作：

var fields = document.getElementById('fields');
for(var i = 0; i < data.length; i++){
    var input = document.createElement('input');
    var label = document.createElement('label');
    var div =  document.createElement('div');
    var span =  document.createElement('span');

    input.setAttribute('id','checkbox'+(i+1));
    input.setAttribute('type','checkbox');
    label.setAttribute('for','checkbox'+(i+1));
    div.setAttribute('class','location_detail');
    span.setAttribute('class','left');

    fields.appendChild(input);
    fields.appendChild(label);
    label.appendChild(document.createTextNode(data[i].DeptId));
    label.appendChild(div);
    div.appendChild(span);
    span.appendChild(document.createTextNode(data[i].__type));
}

<强> Working Sample

Answer 2

<fieldset data-role="controlgroup" data-type="vertical" id="fs">
    <legend>Select Locations</legend>

</fieldset>

和jquery

$.getJSON(url, null, function (data) {
        var $fs = $("#fs");
        $.each(data, function (index, obj) {
            var cbid = "checkbox" + index;
            var $cb = $('<input id="' + cbid + '" name="" type="checkbox" style="float:left;display:inline;"/>');
            var $label = $('<label for="' + cbid + '">').append(obj.DeptName);
            var $div = $('<div class="location_detail">');
            var $span = $("<span class='left'>" + obj.DeptId + "</span>");
            $cb.appendTo($fs);
            $label.appendTo($fs);
            $div.appendTo($label);
            $span.appendTo($div);
        });
    });

更新：

改变对象顺序的小提琴：

http://jsfiddle.net/8WbtF/2/

使用display：block将所有复选框和标签包装到一个div中，以便更轻松地安排。

如何动态创建

2 个答案: