JavaScript根据json生成html表格的示例代码
之前公司有一个需求是：通过js来生成html。而且大部分都是生成表格，直接通过字符串拼接的话，代码的可复用性太低的，所以写了个通用的json转html表格的工具。
代码
htmlKit={
_tags:[],html:[],
_createAttrs:function(attrs){
varattrStr=[];
for(varkeyinattrs){
if(!attrs.hasOwnProperty(key))continue;
attrStr.push(key+"="+attrs[key]+"")
}
returnattrStr.join("")
},
_createTag:function(tag,attrs,isStart){
if(isStart){
return"<"+tag+""+this._createAttrs(attrs)+">"
}else{
return""
}
},
start:function(tag,attrs){
this._tags.push(tag);
this.html.push(this._createTag(tag,attrs,true))
},
end:function(){
this.html.push(this._createTag(this._tags.pop(),null,false))
},
tag:function(tag,attr,text){
this.html.push(this._createTag(tag,attr,true)+text+this._createTag(tag,null,false))
},
create:function(){
returnthis.html.join("")
}
};
functionjson2Html(data){
varhk=htmlKit;
hk.start("table",{"cellpadding":"10","border":"1"});
hk.start("thead");
hk.start("tr");
data["heads"].forEach(function(head){
hk.tag("th",{"bgcolor":"AntiqueWhite"},head)
});
hk.end();
hk.end();
hk.start("tbody");
data["data"].forEach(function(dataList,i){
dataList.forEach(function(_data){
hk.start("tr");
data["dataKeys"][i].forEach(function(key){
varrowsAndCol=key.split(":");
if(rowsAndCol.length===1){
hk.tag("td",null,_data[rowsAndCol[0]])
}elseif(rowsAndCol.length===3){
hk.tag("td",{"rowspan":rowsAndCol[0],"colspan":rowsAndCol[1]},_data[rowsAndCol[2]])
}
});
hk.end()
})
});
hk.end();
hk.end();
returnhk.create()
}
使用说明
HtmlKit
htmlKit是创建html标签的工具
函数
函数名
作用
例子
start(tag,attrs)
创建未封闭标签头
start("table",{"cellpadding":"10","border":"1"})，输出
end()
创建上一个start函数的标签尾
上面执行了start("table")，再执行end()，输出
tag(tag,attr,text)
创建封闭标签
tag("th",{"bgcolor":"AntiqueWhite"},"hello")，输出
json2Html
json转Html
例子：
vardata=[
{
"chinese":80,
"mathematics":89,
"english":90
}
];
vartotal=0;
data.forEach(function(value){
for(keyinvalue){
total+=value[key];
}
});
varhtmlMetadata={
"heads":["语文","数学","英语"],
"dataKeys":[["chinese","mathematics","english"],["text","1:2:total"]],//rowspan:colspan:value
"data":[data,[{"text":"合计","total":total}]]
};
varhtml=json2Html(htmlMetadata);
console.info(html);
输出结果（结果为了好看，格式化了）：
语文
数学
英语
80
89
90
合计
259
效果：
语文
数学
英语
80
89
90
合计
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。