如何使用JSON和JQuery在标记中插入元素

时间:2014-04-08 10:18:19

标签: jquery html json

$(document).ready(function(){

    var Jstr = {
        "JSON" : [
            {
                "Eid": 101,
                "Ename": "",
                "Ecode" : "<h>" + "Ename" + "</h>",
                "Eprops": {}
            },
            {
                "Eid": 102,
                "Ename": "",
                "Ecode" : "<input type ='text'/>",
                "Eprops": {
                    "name": "",
                    "value": "",
                    "maxlength": ""
                }
            },
            {
                "Eid": 103,
                "Ename": "",
                "Ecode" : "<input type ='password'/>",
                "Eprops": {
                    "value": "",
                    "maxlength": ""
                }
            },
            {
                "Eid": 104,
                "Ename": "",
                "Ecode" : "<input type ='button' value = '' />",
                "Eprops": {
                    "value": ""
                }
            },
            {
                "Eid": 105,
                "Ename": "",
                "Ecode" : "<input type = 'submit' value='submit'/>",
                "Eprops": {
                    "value": ""
                }
            },
            {
                "Eid": 106,
                "Ename": "",
                "Ecode" : "<input type = 'radio'  />",
                "Eprops": {
                    "name": ""
                }
            },
            {
                "Eid": 107,
                "Ename": "",
                "Ecode" : "<input type = 'checkbox'/>",
                "Eprops": {
                    "name": ""
                }
            },
            {
                "Eid": 108,
                "Ename": "",
                "Ecode" : "<input type = 'select'/>",
                "Eprops": {
                    "name": ""
                }
            },
            {
                "Eid": 109,
                "Ename":"",
                "Ecode" : "<input type = 'reset'/>" ,
                "Eprops": {
                    "name": ""
                }
            },
            {
                "Eid": 110,
                "Ename": "",  
                "Ecode" : "<input type = 'textbox'/>" , 
                "Eprops": {
                    "name": "",
                    "value": "",
                    "maxlength": ""
                }
            },
            {
                "Eid": 111,
                "Ename": "",  
                "Ecode" : "<input type = 'file'/>" , 
                "Eprops": {
                    "id": ""
                }
            },
        ]
    };

    $(".search").click(function(){
        var id = this.id;
        alert(id);

        for(var i =0;i<Jstr.JSON.length;i++) {
            var obj = Jstr.JSON[i];

            if(obj.Eid == id) {
                var pr = $(Jstr.JSON[i].Ecode);
                alert("Enter Properties");

                for(var key in Jstr.JSON[i].Eprops) {
                    pr.attr("key", function(){
                        //alert("in prop");
                        var p  = prompt(key, "");
                        return p;
                    });
                }

                var name = prompt("Tag-Name", "");
                obj.Ename = name;
                $('#down').append(obj.Ename);

                $('#down').append(obj.Ecode);
                $('#down').append("<br>");
            }
        }
    });
});

这是我的jQuery代码,我尝试从JSON对象创建表单元素。现在的问题是我没有办法在Ecode的标签中附加Eprops的属性

1 个答案:

答案 0 :(得分:0)

您可以使用<语法在jQuery中创建元素:jQuery( html [, ownerDocument ] )

此语法的第二个参数可以是对象属性名称/值:

Jstr.JSON.forEach(function (elem) {
    $(elem.Ecode, elem.Eprops).appendTo("body");
});