服务端返回json数据动态创建行添加到现有表格中
<!DOCTYPE html>
<html>
<head>
<title>JQueryFunction</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
function test2() {
var data = [{COURSENAME: "国学研究", KMNAME: "语文", SCORE: 100, CREDITHOUR: "2"},
{COURSENAME: "国学研究", KMNAME: "语文", SCORE: 100, CREDITHOUR: "1"},
{COURSENAME: "国学研究", KMNAME: "语文", SCORE: 100, CREDITHOUR: "2"},
{COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "2"},
{COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "3"},
{COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "1"},
{COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "1"},
{COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "3"},
{COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "1"},
{COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "2"},
{COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "1"},
{COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "4"}];
if (data.length > 0 && data[0].KMNAME !=null) {
var table = $('#ZB02');
var tds = table.find('td:gt(2)');
var arr = {}, kmname;
//按表格顺序初始化
for (var i in tds) {
if (tds.eq(i).text().length>0)
arr[tds.eq(i).text()] = { course: [], credithour: 0 };
}
//按顺序填充数据
var maxrow = 0;
for (var i in data) {
kmname = data[i].KMNAME;
if (!arr[kmname]) {
arr[kmname] = { course: [], credithour:0};
}
arr[kmname].course.push(data[i].COURSENAME);
arr[kmname].credithour += parseInt(data[i].CREDITHOUR);
if (arr[kmname].course.length > maxrow) {
maxrow = arr[kmname].course.length;
}
}
console.log(arr); console.log(maxrow);
var col = 0,course='';
var obj = $('<div></div>');
for (var row = 0; row < maxrow; row++) {
var trObj = $('<tr></tr>');
trObj.append(tds.clone());
col = 0;
for (var km in arr) {
if (arr[km].course.length > row) {
course = arr[km].course[row];
} else {
course = '';
}
trObj.find('td').eq(col).text(course);
col++;
}
if (row === 0) {
trObj.prepend('<td rowspan="' + (maxrow) + '">模块<br />专题</td>');
}
obj.append(trObj);
}
//显示总学分
var credithtml = $('<tr></tr>').append(tds.clone());
col = 0;
for (var km in arr) {
credithtml.children().eq(col).text(arr[km].credithour);
col++;
}
table.next().next().next().replaceWith('<tr><td>学分</td>' + credithtml.html() + '</tr>');
table.next().remove();
if (maxrow > 1) {
table.next().remove();
}
table.after(obj.html());
table.find('td').eq(0).attr('rowspan', maxrow + 6);
table.find('td').eq(1).attr('rowspan', maxrow + 2);
}
}
$(function () {
test2();
});
</script>
</head>
<body>
<table id="tab" border="1">
<thead id="thead"></thead>
<tbody id="tbody">
<tr id="ZB02" class="topcode">
<td width="30" rowspan="8" style="text-align:center;"><strong>学<br />
业<br />
水<br />
平</strong></td>
<td colspan="2" rowspan="4">学业修习</td>
<td>科目</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>历史</td>
<td>地理</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
<td>信息技术</td>
<td>通用技术</td>
<td>艺术</td>
<td colspan="2">体育与健康</td>
<td colspan="2">综合实践活动</td>
</tr>
<tr>
<td rowspan="2">模块<br />专题</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td>学分</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
