根据json数据动态生成表格，自定义表格的列数
2019-11-05 本文已影响0人
菜菜___
最近的项目需要根据后台的返回数据动态生成表格，当返回的json数组长度大于4时，绘制一个多行4列的表格，当小于4时，只需要绘制列数为具体长度的表格。
自定义json数据如下：
var jsonArr = [
{
"name":"计算机组成原理"
},
{
"name":"计算机网络"
},
{
"name":"数据结构"
},
{
"name":"网页程序设计"
},
{
"name":"嵌入式开发"
},
{
"name":"高等数学"
}
]
绘制表格方法如下，主要是根据需要的列数绘制一行，然后画完一行开始下一行。
/**
* 根据json动态创建表格
* @param cols 表格的列数，默认值4
* @param json 渲染表格的json数据
* @param key json的键名
* @param div 存放表格的容器
*/
function createTable(cols,json,key,_obj){
if(!cols){
cols = 4;
}
if(json.length < 1){
return;
}
var html = "";
var count = 1;
var trHtml = "";
if(json.length<cols){
for(i in json) {
html += "<td>" + json[i][key] + "</td>"
}
html = "<tr>"+html+"</tr>";
}else{
for(i in json){
if(count > cols){
html += "<tr>"+trHtml+"</tr>";
count = 1;
trHtml = "";
}
count++;
trHtml += "<td>"+json[i][key]+"</td>";
}
/*不足设定好的列数时，依然添加在最后面*/
if(trHtml){
html += "<tr>"+trHtml+"</tr>";
}
}
_obj.html(html);
}
完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
margin: 30px auto;
border-collapse: collapse;
text-align: center;
}
table td{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table></table>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script>
$(function(){
createTable(4,jsonArr,"name",$("table"))
})
var jsonArr = [
{
"name":"计算机组成原理"
},
{
"name":"计算机网络"
},
{
"name":"数据结构"
},
{
"name":"网页程序设计"
},
{
"name":"嵌入式开发"
},
{
"name":"高等数学"
}
]
/**
* 根据json动态创建表格
* @param cols 表格的列数，默认值4
* @param json 渲染表格的json数据
* @param key json的键名
* @param div 存放表格的容器
*/
function createTable(cols,json,key,_obj){
if(!cols){
cols = 4;
}
if(json.length < 1){
return;
}
var html = "";
var count = 1;
var trHtml = "";
if(json.length<cols){
for(i in json) {
html += "<td>" + json[i][key] + "</td>"
}
html = "<tr>"+html+"</tr>";
}else{
for(i in json){
if(count > cols){
html += "<tr>"+trHtml+"</tr>";
count = 1;
trHtml = "";
}
count++;
trHtml += "<td>"+json[i][key]+"</td>";
}
/*不足设定好的列数时，记得添加在最后面*/
if(trHtml){
html += "<tr>"+trHtml+"</tr>";
}
}
_obj.html(html);
}
</script>
</body>
</html>
效果图如下：
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
