关闭

js动态加载列表

690人阅读 评论(0) 收藏 举报
分类:

这里用的是json做数据,其实在相应的工作中我们是后台给我们的数据,但是也是json数据。

<pre name="code" class="html"><script>
 var my_json='[{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"}]';
        var my_object=eval('('+my_json+')');
        function obj(eve){
            this.html = eve.name;
            this.html = eve.sex;
            this.get = function(){
                return "<div class='fir'>"+eve.name+"</div>" + "<div class='second'>"+eve.sex+"</div>";
        }
    }
        for(var i = 0;i<my_object.length;i++){
            var new_obj = new obj(my_object[i]);
            var div = document.createElement('div');
            div.id = 'list';
            document.body.appendChild(div);
            div.innerHTML += new_obj.get();
        }
</script>




<style type="text/css">
            body{
                background-color:white;
            }
            #list{
                height:100px;
                border-bottom:1px solid lightgray;
            }
            .fir{
                padding-top:15px;
                padding-left:50px;
                color:skyblue;
            }
            .second{
                padding-top:5px;
                padding-left:50px;
                color:lightgray;
                font-size:0.9em;
            }
        </style>

这样子我们的列表就做好了。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2388次
    • 积分:139
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档