2020-11-24

JS将json格式数据分组显示到表格中

条件：
源数据通过查询数据库为如下格式：

data: jsonData.toJson()
//种类：type   名字：name  值：value

问题：
目的表格显示格式：

解决方法：

获取总数：

var total = 0;   //总数
        for (var i = 0; i < data.length; i++) {
            total += ~~data[i].value;
        }

生成表格：

 var typeData=countType(data);
        for (var i = 0; i < data.length; i++) {
            var rowNumber=typeData[data[i].type];
            var tr = document.createElement("tr");
            if (i == 0) {
                tr.innerHTML = '<td class="active" rowspan='+rowNumber +'>'+ (data[i].type== undefined ? '' : data[i].type) + '</td>' +
                    '<td class="active">' + (data[i].name == undefined ? '' : data[i].name) + '</td>' +
                    '<td class="active">' + (data[i].value == undefined ? '' : data[i].value) + '</td>' +
                    '<td class="active" rowspan=' + data.length + '>' + total + '</td>';
            } else if(data[i].type==data[i-1].type)
            {
                tr.innerHTML =
                    '<td class="active">' + (data[i].name == undefined ? '' : data[i].name) + '</td>' +
                    '<td class="active">' + (data[i].value == undefined ? '' : data[i].value) + '</td>';
            }
            else
            {
                var tr = document.createElement("tr");
                tr.innerHTML = '<td class="active" rowspan=' + rowNumber + '>' + (data[i].type== undefined ? '' : data[i].type) + '</td>' +
                    '<td class="active">' + (data[i].name == undefined ? '' : data[i].name) + '</td>' +
                    '<td class="active">' + (data[i].value == undefined ? '' : data[i].value) + '</td>'
            }
            tableArr.appendChild(tr);
        }

获取表格中种类行数方法：

//获取表格中种类行数
function countType(data){
    var count={};
    for(var i=0;i<data.length;i++){
        if(count[data[i].type]){
            count[data[i].type]++;
            continue;
        }
        count[data[i].type]=1;
    }
    return count;
}