【javascript动态添加数据到HTML页⾯】
今天简单的学习了⼀下有关对象字⾯量的定义和 javascript 如何取出对象字⾯量的值的知识，javascript 动态添加数据到 HTML 页⾯的问题。
【学习⽬标】有如下的⼀组数据通过 Ajax 传递过来：
var dataList = [
{
state: 2, // 0:sharing 1:unJoin 2:sharingEnd
name: '客户1',
phone: 136********
},
{
state: 1, // 0:sharing 1:unJoin 2:sharingEnd
name: '客户2',
phone: 136********
},
{
state: 2, // 0:sharing 1:unJoin 2:sharingEnd
name: '客户3',
phone: 136********
},
{
state: 0, // 0:sharing 1:unJoin 2:sharingEnd
name: '客户4',
phone: 136********
},
{
state: 0, // 0:sharing 1:unJoin 2:sharingEnd
name: '客户5',
phone: 136********
}
]
需要把这组数据动态的显⽰到 HTML 页⾯上，实现如下的效果：
【解决思路与⽅法】
DOM 结构和 CSS 样式都已经定义好，但是在获取 data 的值的时候遇到了困难。初学者不知道这个
属于哪个范围的知识，于是便开始在⽹上到处寻。Json 、数组，都简单的翻阅了⼀下，在跑偏之前终于到了问题所在的关键点。现总结如下：
我们之前看到的例⼦都是使⽤点标识符创建对象和成员的，例如：
var ElementById('example');
使⽤对象字⾯量的⽅法更加简单、⽅便、易懂，例如：
var myObj = {
name:'Tiramisu',
age:20,
phoneNum:152********,
myFunction:function(){}
}
以上代码等价于：
var myObj = {};
myObj.name = 'Tiramisu';
myObj.age = 20;
myObj.phoneNum = 152********;
对于给出的 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">150********</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.Share{
display: none;
}
.shareBox .shareState .unJoin .itemInfo p.Share{
display: none;
}
.shareBox .shareState .sharingEnd .itemInfo p.dShare{
display: none;
}
接下来的任务便是动态的创建 DOM 并添加样式。在这⾥我先后讲两种⽅法，第⼀种⽅法是⾃⼰写的，⽐较低级，⽽且繁琐，代码易读性不
⾼。介于是⾃⼰⾟⾟苦苦写出来的，就贴在这⾥了。代码如下：
for(var i = 0;i < data.length;i ++){
var oShareStateList = ElementById('shareSateList');
//为 shareSateList 新增⼦节点，即新添加⼀个名⽚
var oAddItem = ateElement('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 = ateElement('div');
oAddItemInfo.className = 'itemInfo';
oAddItem.appendChild(oAddItemInfo);
//添加名字
var oName = ateElement('p');
oName.className = 'name';
oName.innerHTML = data[i].name;
oAddItemInfo.appendChild(oName);
//添加电话号码
var oPhone = ateElement('p');
oPhone.className = 'phone';
oPhone.innerHTML = data[i].phone;
oAddItemInfo.appendChild(oPhone);
//添加换⾏
var oBr = ateElement('br');
oAddItemInfo.appendChild(oBr);
//添加状态分享状态
var oState = ateElement('p');
oState.className = 'state';
oAddItemInfo.appendChild(oState);
var oA = ateElement('a');
oA.className = 'endShare';
oA.innerHTML = '结束分享';
oA.href = 'javascript:;';
oState.appendChild(oA);
var oState = ateElement('p');
oState.className = 'state';
oAddItemInfo.appendChild(oState);
var oA = ateElement('a');
oA.className = 'reShare';
oA.innerHTML = '重新分享';
oA.href = 'javascript:;';
oState.appendChild(oA);
//添分享状态⾓标
var oMark = ateElement('div');
oMark.className = 'mark';
oAddItem.appendChild(oMark);
}
}
第⼆种⽅法是同事建议的代码，不仅简洁美观，⽽且代码易读性⾼，值得很好的学习借鉴。代码如下：var oShareStateList = ElementById('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 = ateElement( 'div' );
_dom.setAttribute( 'class', 'item ' + state[ data.state ] );
_dom.innerHTML = place( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );
}
javascript动态效果setTimeout( fetchData, 100 );
【相关知识点】
这些代码涉及到如下的⼏个知识点：
1.JavaScript shift() ⽅法：shift() ⽅法⽤于把数组的第⼀个元素从其中删除，并返回第⼀个元素的值。
2.JavaScript slice() ⽅法：slice() ⽅法可提取字符串的某个部分，并以新的字符串返回被提取的部分。语法如下：stringObject.slice(start,end)
start 参数：要抽取的⽚断的起始下标。
end 参数：紧接着要抽取的⽚段的结尾的下标。
3.很重要也很适⽤的⼀条语句：
【总结】
头脑⾥要有⾯向对象编程的概念和习惯，⼀个函数⾥⾯的执⾏语句如果超过⼀定数量就要分出来做函数处理。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论