js动态加载列表

原创 2016年08月30日 16:17:59

这里用的是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>

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

js中动态添加ul列表中的li

要实现的样式 html中的代码 js中的写法 注意:i是取值的个数,i%3表示按样式取3个值之后,在重新写一个ul         在迭代取值的时候,i-1表示...
  • syz1217
  • syz1217
  • 2015年11月25日 13:15
  • 4158

关于js动态向下拉列表中添加数据

在网上找的,经过试验还不错,反正很适合我,直接。 大体的思路就是: var objSelect = document.getElementById("leixingwx");//获得select标...
  • MCJ_King
  • MCJ_King
  • 2015年09月25日 14:00
  • 2657

js实现表格行的动态添加

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还...
  • u012422446
  • u012422446
  • 2015年08月18日 11:01
  • 4795

JS滚动列表加载

  • 2017年12月01日 14:17
  • 42KB
  • 下载

通过js实现动态化生成列表

1、Test.html Modal //E-NAME,E-TYPE,E-MON,E-T_MON,REDUCE,E-MONT...
  • u012151556
  • u012151556
  • 2016年12月31日 16:29
  • 5198

HTML5+中动态构建列表并填充数据

部分代码参考demo----《历史上的今天》。         感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用。 html部...
  • u013283727
  • u013283727
  • 2015年02月12日 09:43
  • 8405

js实现动态添加表格的行

js实现动态添加表格的行
  • qq_15536303
  • qq_15536303
  • 2016年08月07日 11:36
  • 669

动态加载bootstrap表格数据

  • 2016年11月29日 17:33
  • 159KB
  • 下载

[Javascript]在HTML页面中动态添加表格,动态生成行的示例

"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里...
  • softwave
  • softwave
  • 2005年11月18日 08:47
  • 12153

JS下拉列表动态收缩与展开

简述 JS代码中的intag是事件源,放在事件中就是this,只要你的下拉列表的JSP或者HTML5代码符合下边示例的规范,就可以直接复制JS代码并直接引用。 使用方法: 下拉列表定义格式(每个div...
  • dreamwbt
  • dreamwbt
  • 2016年12月18日 02:43
  • 3033
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态加载列表
举报原因:
原因补充:

(最多只允许输入30个字)