Contents
  1. 1. JS动态创建Table表
    1. 1.1. js遍历Json
    2. 1.2. 表头thead
    3. 1.3. tbody

JS动态创建Table表

接口返回JSON示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
{
"BugCount": {
"fieldExplain": {
"month": "月份",
"totalCount": "整体BUG数量",
"online": "纯线上Bug数量",
"offline": "线下bug",
"onlinePercent": "纯线上Bug占比",
"offlinePercent": "线下Bug占比"
},
"BugCountDetail": [{
"month": "2017-03",
"totalCount": "1564",
"online": "291",
"offline": "1273",
"onlinePercent": "36.82%",
"offlinePercent": "81.39%"
}, {
"month": "2017-04",
"totalCount": "1214",
"online": "311",
"offline": "903",
"onlinePercent": "25.62%",
"offlinePercent": "74.38%"
}, {
"month": "2017-05",
"totalCount": "1267",
"online": "249",
"offline": "1118",
"onlinePercent": "18.22%",
"offlinePercent": "81.78%"
}, {
"month": "2017-06",
"totalCount": "1572",
"online": "278",
"offline": "1294",
"onlinePercent": "17.68%",
"offlinePercent": "82.32%"
}]
},
"OnlineBug": {
"fieldExplain": {
"month": "月份",
"totalCount": "整体BUG数量",
"online": "纯线上BUG数量",
"online_P0": "纯线上Bug-P0",
"online_P1": "纯线上Bug-P1",
"online_P2": "纯线上Bug-P2",
"online_Others": "纯线上Bug-其他",
"online_P0P1": "纯线上P0P1",
"online_P2P3": "纯线上P2P3",
"online_P012": "纯线上P012",
"P0P1_Percent": "P0P1占比"
},
"OnlineBugDetail": [{
"month": "2017-03",
"totalCount": "1564",
"online": "291",
"online_P0": "25",
"online_P1": "84",
"online_P2": "156",
"online_Others": "26",
"online_P0P1": "109",
"online_P2P3": "182",
"online_P012": "265",
"P0P1_Percent": "37.46%"
}, {
"month": "2017-04",
"totalCount": "1214",
"online": "311",
"online_P0": "30",
"online_P1": "78",
"online_P2": "187",
"online_Others": "16",
"online_P0P1": "108",
"online_P2P3": "203",
"online_P012": "295",
"P0P1_Percent": "34.73%"
}, {
"month": "2017-05",
"totalCount": "1367",
"online": "249",
"online_P0": "21",
"online_P1": "68",
"online_P2": "147",
"online_Others": "13",
"online_P0P1": "89",
"online_P2P3": "160",
"online_P012": "236",
"P0P1_Percent": "35.74%"
}, {
"month": "2017-06",
"totalCount": "1572",
"online": "278",
"online_P0": "36",
"online_P1": "79",
"online_P2": "140",
"online_Others": "23",
"online_P0P1": "115",
"online_P2P3": "163",
"online_P012": "255",
"P0P1_Percent": "41.37%"
}]
}
}

fieldExplain 为表头 theadBugCountDetailOnlineBugDetail 为表格内容即: tbody

js遍历Json

1
2
3
4
5
6
7
8
9
10
11
12
var jsonData = "month":"2017-03","totalCount":"1564","online":"291","offline":"1273","onlinePercent":"36.82%","offlinePercent":"81.39%"},{"month":"2017-04","totalCount":"1214","online":"311","offline":"903","onlinePercent":"25.62%","offlinePercent":"74.38%"},{"month":"2017-05","totalCount":"1267","online":"249","offline":"1118","onlinePercent":"18.22%","offlinePercent":"81.78%"},{"month":"2017-06","totalCount":"1572","online":"278","offline":"1294","onlinePercent":"17.68%","offlinePercent":"82.32%"}];
for(var i=0; i<jsonData.length ;i++){
//循环多少个{}json串
for(var key in jsonData[i]){
//循环遍历一个{...} json串,
//如:{"month":"2017-04","totalCount":"1214","online":"311","offline":"903","onlinePercent":"25.62%","offlinePercent":"74.38%"}
console.log(key+':'+jsonData[i][key]);
//key 即为json中的key, jsonData[i][key] 对应其值
}
}

表头thead

1
2
3
4
5
6
7
8
9
10
// 拆分; 表头部分
var json = {"month":"月份","totalCount":"整体BUG数量","online":"纯线上Bug数量","offline":"线下bug","onlinePercent":"纯线上Bug占比","offlinePercent":"线下Bug占比"};
var tHead = '';
//表头
for(var k in tHeadObj) {
tHead += '<th>' + tHeadObj[k] + '</th>';
}
tHead = '<thead><tr>' + tHead + "</tr></thead>";
return tHead;

tbody

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//表body部分
var jsonData = [{"month":"2017-03","totalCount":"1564","online":"291","offline":"1273","onlinePercent":"36.82%","offlinePercent":"81.39%"},{"month":"2017-04","totalCount":"1214","online":"311","offline":"903","onlinePercent":"25.62%","offlinePercent":"74.38%"},{"month":"2017-05","totalCount":"1267","online":"249","offline":"1118","onlinePercent":"18.22%","offlinePercent":"81.78%"},{"month":"2017-06","totalCount":"1572","online":"278","offline":"1294","onlinePercent":"17.68%","offlinePercent":"82.32%"}];
//创建表Body
var tBody = '';
var tBody_tr = '';
for(var i=0; i<jsonData.length; i++){
tBody += '<tr>';
for(var key in jsonData[i]){
//alert(jsonData[i][key]);
tBody += "<td>" + jsonData[i][key] + "</td>";
}
tBody_tr = tBody + "</tr>";
}
tBody = "<tbody>" + tBody_tr + "</tbody>";
console.log(tBody);

输出:

1
<tbody><tr><td>2017-03</td><td>1564</td><td>291</td><td>1273</td><td>36.82%</td><td>81.39%</td><tr><td>2017-04</td><td>1214</td><td>311</td><td>903</td><td>25.62%</td><td>74.38%</td><tr><td>2017-05</td><td>1267</td><td>249</td><td>1118</td><td>18.22%</td><td>81.78%</td><tr><td>2017-06</td><td>1572</td><td>278</td><td>1294</td><td>17.68%</td><td>82.32%</td></tr></tbody>

将以上2部分合并为一个函数即可。

调用该函数时,主要传入headjson数据和body所需的数组json即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function createBugCountTable(captionTitle, tHeadObj, tBodyArr) {
// 表格标题
var caption = '<table class="table table-bordered table-hover "><caption class="text-muted h4">' + captionTitle +
'</caption>';
//TODO JS遍历json
var tableHead = '<thead><tr><th>' + tHeadObj.month + '</th><th>' + tHeadObj.totalCount + '</th><th>' + tHeadObj.online +
'</th><th>' + tHeadObj.offline + '</th><th>' + tHeadObj.onlinePercent + '</th><th>' + tHeadObj.offlinePercent +
'</th></tr></thead><tbody>';
var tableBody = '';
for (var i = 0; i < tBodyArr.length; i++) {
tableBody += '<tr><td>' + tBodyArr[i].month + '</td><td>' + tBodyArr[i].totalCount + '</td><td>' + tBodyArr[i].online +
'</td><td>' + tBodyArr[i].offline + '</td><td>' + tBodyArr[i].onlinePercent + '</td><td>' + tBodyArr[i].offlinePercent +
'</td></tr>';
}
return caption + tableHead + tableBody + '</tbody></table>';
}
var t = createBugCountTable("test", tHeadObj, tBodyArr);
console.log(t);

Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为create table dynamic.
Contents
  1. 1. JS动态创建Table表
    1. 1.1. js遍历Json
    2. 1.2. 表头thead
    3. 1.3. tbody