【javascript 动态添加数据到 HTML 页面】

今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识，javascript 动态添加数据到 HTML 页面的问题。

【学习目标】有如下的一组数据通过 Ajax 传递过来：

var dataList = [{state: 2,    //  0:sharing  1:unJoin  2:sharingEndname: '客户1',phone: 13675896031},{state: 1,    //  0:sharing  1:unJoin  2:sharingEndname: '客户2',phone: 13675896032},{state: 2,    //  0:sharing  1:unJoin  2:sharingEndname: '客户3',phone: 13675896033},{state: 0,   //  0:sharing  1:unJoin  2:sharingEndname: '客户4',phone: 13675896034},{state: 0,   //  0:sharing  1:unJoin  2:sharingEndname: '客户5',phone: 13675896035}
]

需要把这组数据动态的显示到 HTML 页面上，实现如下的效果：

【解决思路与方法】

DOM 结构和 CSS 样式都已经定义好，但是在获取 data 的值的时候遇到了困难。初学者不知道这个属于哪个范围的知识，于是便开始在网上到处寻找。Json 、数组，都简单的翻阅了一下，在跑偏之前终于找到了问题所在的关键点。现总结如下：

我们之前看到的例子都是使用点标识符创建对象和成员的，例如：

var temp=document.getElementById('example');

使用对象字面量的方法更加简单、方便、易懂，例如：

var myObj = {name:'Tiramisu',age:20,phoneNum:15265658952,myFunction:function(){}
}

以上代码等价于：

var myObj = {};
myObj.name = 'Tiramisu';
myObj.age = 20;
myObj.phoneNum = 15265658952;
myObj.myFunction = function(){};

对于给出的 data 可以看作一个数组，那么当我们访问客户一的属性值的时候可以使用如下的语句：

var oName = dataList[0].name;
var oState = dataList[0].state;
var oPhone = dataList[0].phone;
console.log(oName,oState,oPhone);

基本知识点整理完毕后开始解决目标问题。我要构建的 DOM 结构如下：

<div class="shareBox"><!-- 分享状态 --><div class="shareState clearfix"><div class="shareSateList" id="shareSateList"><div class="item sharing">  <!-- 如需切换角标切换类名即可 sharing：分享中；unJoin：未加入；sharingEnd：已结束 --><div class="itemInfo"><p class="name">李四</p><p class="phone">15024490626</p><br/><p class="state"><a class="endShare" href="javascript:;">结束分享</a></p><p class="state"><a class="reShare" href="javascript:;">重新分享</a></p></div><div class="mark"></div>         </div></div>         </div>
</div>

CSS 样式如下：

/*分享状态样式*/
.shareBox .shareState{width: 900px;position: relative;overflow: hidden;
}
.shareBox .shareState .shareSateList{width: 910px;
}
.shareBox .shareState .mark{  /*分享状态角标*/width: 57px;height: 52px;position: absolute;right: 0px;top: 0px;s
}
.shareBox .shareState .sharing .mark{   /*已分享*/background-image:url(../imgs/sharing.png);background-repeat: no-repeat;
}
.shareBox .shareState .unJoin .mark{   /*未加入*/background-image:url(../imgs/unJoin.png);background-repeat: no-repeat;
}
.shareBox .shareState .sharingEnd .mark{  /*已结束*/background-image:url(../imgs/sharingEnd.png);background-repeat: no-repeat;
}
.shareBox .shareState .item{  /*名片样式*/width: 291px;height: 157px;float: left;border:1px solid #dfdfdf;margin-right: 10px;margin-bottom: 10px;position: relative;
}
.shareBox .shareState .item:hover{border:1px solid #F26426;cursor: pointer;background-image:url(../imgs/delete.png);background-repeat: no-repeat;
}
.shareBox .shareState .itemInfo{   position: absolute;top:33px;left: 68px;
}
.shareBox .shareState p.name{   /*名片姓名*/font-size: 24px;
}
.shareBox .shareState p.phone{  /*名片联系方式*/font-size: 18px;
}
.shareBox .shareState p.state{  /*视频分享状态显示*/color: #4857e3;
}
.shareBox .shareState p.state a{  /*视频分享状态显示*/text-decoration: none;
}
.shareBox .shareState .sharing .itemInfo p.state a.reShare{display: none;
}
.shareBox .shareState .unJoin .itemInfo p.state a.reShare{display: none;
}
.shareBox .shareState .sharingEnd .itemInfo p.state a.endShare{display: none;
}

接下来的任务便是动态的创建 DOM 并添加样式。在这里我先后讲两种方法，第一种方法是自己写的，比较低级，而且繁琐，代码易读性不高。介于是自己辛辛苦苦写出来的，就贴在这里了。代码如下：

window.onload = function(){for(var i = 0;i < data.length;i ++){   var oShareStateList =  document.getElementById('shareSateList');//为 shareSateList 新增子节点，即新添加一个名片var oAddItem = document.createElement('div'); if(data[i].state == 0){oAddItem.className = 'item sharing'; }if(data[i].state == 1){oAddItem.className = 'item unJoin'; }if(data[i].state == 2){oAddItem.className = 'item sharingEnd'; }  oShareStateList.appendChild(oAddItem);//添加新增添的名片里的内容var oAddItemInfo = document.createElement('div');oAddItemInfo.className = 'itemInfo';oAddItem.appendChild(oAddItemInfo);//添加名字var oName = document.createElement('p');oName.className = 'name';oName.innerHTML = data[i].name;oAddItemInfo.appendChild(oName);//添加电话号码var oPhone = document.createElement('p');oPhone.className = 'phone';oPhone.innerHTML = data[i].phone;oAddItemInfo.appendChild(oPhone);//添加换行var oBr = document.createElement('br');oAddItemInfo.appendChild(oBr);//添加状态分享状态var oState = document.createElement('p');oState.className = 'state';oAddItemInfo.appendChild(oState);var oA = document.createElement('a');oA.className = 'endShare';oA.innerHTML = '结束分享';oA.href = 'javascript:;';oState.appendChild(oA);var oState = document.createElement('p');oState.className = 'state';oAddItemInfo.appendChild(oState);var oA = document.createElement('a');oA.className = 'reShare';oA.innerHTML = '重新分享';oA.href = 'javascript:;';oState.appendChild(oA);//添分享状态角标var oMark = document.createElement('div');oMark.className = 'mark';oAddItem.appendChild(oMark);}
}

第二种方法是同事建议的代码，不仅简洁美观，而且代码易读性高，值得很好的学习借鉴。代码如下：

var oShareStateList =  document.getElementById('shareSateList'),tmp = ['<div class="itemInfo">','<p class="name">{name}</p>','<p class="phone">{phone}</p><br/>','<p class="state"><a class="endShare" href="javascript:;">结束分享</a></p>','<p class="state"><a class="reShare" href="javascript:;">重新分享</a></p>','</div>','<div class="mark"></div>'].join(''),state = ['sharing', 'unJoin', 'sharingEnd'];function fetchData(){//异步获取数据//if( succes ){}
    renderAll( dataList );}function renderAll( datas ){var data;while( data = datas.shift() ){render( data );}}    function render( data ){var _dom = document.createElement( 'div' );_dom.setAttribute( 'class', 'item ' + state[ data.state ] );_dom.innerHTML = tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );document.getElementById('shareSateList').appendChild( _dom );}setTimeout( fetchData, 100 );

【相关知识点】

这些代码涉及到如下的几个知识点：

1.JavaScript shift() 方法：shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

2.JavaScript slice() 方法：slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。语法如下：

stringObject.slice(start,end)

start 参数：要抽取的片断的起始下标。

end 参数：紧接着要抽取的片段的结尾的下标。

3.很重要也很适用的一条语句：

tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );

【总结】

头脑里要有面向对象编程的概念和习惯，一个函数里面的执行语句如果超过一定数量就要分出来做函数处理。

转载于:https://www.cnblogs.com/guduoduo/p/3678368.html

【javascript 动态添加数据到 HTML 页面】相关推荐

vue知识点详解，Vue之v-prev、vue-virtual-scroll-list、alise、data动态添加数据、v-for中的key值等
1.没有vue语法的v-prev 给模版中静态html添加该指令,表示不需要重复编译.(可以极大的加快编译速度) 2.vue-virtual-scroll-list虚拟插件,用于长列表,几十万的数据也 ...
关于用java编写生成word文档，动态添加数据到word文档的一些心得
关于用java编写生成word文档,动态添加数据到word文档的一些心得,经过翻阅了无数的有用的和无用的资料以后,总算找到了一种靠谱的方法 1.概述经过反反复复的查阅资料,总算找到了一个靠谱的生成w ...
jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...
Elasticsearch的智能判断：动态添加数据映射
Solr在新增数据时,只能使用提前配置好映射属性的字段,否则就会报错. 不过在Elasticsearch中并没有这样的规定. 事实上Elasticsearch非常智能,你不需要给索引库设置任何mapp ...
C#chart绘折线图动态添加数据
C#入门基础,实现chart控件动态添加数据源程序https://download.csdn.net/download/qq_42237381/10742048 目录一.效果示意二.原理说明三 ...
javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...
javascript动态添加form表单元素
2019独角兽企业重金招聘Python工程师标准>>> 2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的情景: 后台要上传游戏截 ...
静态html js文件上传,js实现动态添加上传文件页面
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选 ...

【javascript 动态添加数据到 HTML 页面】

【javascript 动态添加数据到 HTML 页面】相关推荐

最新文章

热门文章