<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div0">
</div>
<br/>
<div id="div1">
</div>
<br/>
<div id="div3">
</div>
</body>
<script>
/*var result = [];
var datas=[{"id":"01"},{"id":"01_01"},{"id":"01_01_01"},{"id":"02"},{"id":"02_01"},{"id":"02_01_01"},{"id":"01_01_04"}];
var datasLast=[{"id":"01_01_01"},{"id":"02_01_01"},{"id":"01_01_03"},{"id":"01_01_04"},{"id":"01_01_04_05"}];
function getSubNum(start){
var childNum = 0;
for (var i = 0; i < datasLast.length; i++) {
var obj = datasLast[i].id;
if(obj.indexOf(start)==0 && start!=obj){
childNum = childNum + 1;
}
}
return childNum;
}
for (var i = 0; i < datas.length; i++) {
var obj = datas[i];
var childNum = getSubNum(obj.id);
console.log(obj.id + ":" + childNum);
}*/
var datas_0 = [
[{
"id": "1-1",
child: 3
}, {
"id": "1-2",
child: 3
}],
[{
"id": "2-1",
child: 2
}, {
"id": "2-2",
child: 1
}, {
"id": "2-3",
child: 1
}, {
"id": "2-4",
child: 2
}],
[{
"id": "1",
child: 0
}, {
"id": "2",
child: 0
}, {
"id": "3",
child: 0
}, {
"id": "4",
child: 0
}, {
"id": "5",
child: 0
}, {
"id": "6",
child: 0
}]
];
var datas_1 = [
[{
"id": "1-1",
child: 3
}, {
"id": "1-2",
child: 3
}],
[{
"id": "2-1",
child: 2
}, {
"id": "2-2",
child: 1
}, {
"id": "2-3",
child: 1
}, {
"id": "2-4",
child: 2
}],
[{
"id": "1",
child: 0
}, {
"id": "2",
child: 0
}, {
"id": "3",
child: 0
}, {
"id": "4",
child: 0
}, {
"id": "5",
child: 0
}, {
"id": "6",
child: 0
}],
[{
"id": "1",
child: 0
}, {
"id": "2",
child: 0
}, {
"id": "3",
child: 0
}, {
"id": "4",
child: 0
}, {
"id": "5",
child: 0
}, {
"id": "6",
child: 0
}],
[{
"id": "1",
child: 0
}, {
"id": "2",
child: 0
}, {
"id": "3",
child: 0
}, {
"id": "4",
child: 0
}, {
"id": "5",
child: 0
}, {
"id": "6",
child: 0
}]
];
function outTable(datas) {
var lastNum = [];
var rowNum = [];
for(var i = 0; i < datas.length; i++) {
lastNum.push(0);
rowNum.push(0);
}
tStr = "<table border='1'>";
for(var i = 0; i < datas[datas.length - 1].length; i++) {
//document.writeln("<tr>");
tStr = tStr + "<tr>";
for(var j = 0; j < datas.length; j++) {
var cols = datas[j];
if(lastNum[j] == 0) {
var row = rowNum[j];
if(cols[row]) {
if(cols[row].child > 0) {
lastNum[j] = cols[row].child - 1;
tStr = tStr + "<td rowspan='" + cols[row].child + "'>" + cols[row].id + " [" + i + "行," + j + "列]" + "</td>";
} else {
tStr = tStr + "<td>" + cols[row].id + " [" + i + "行," + j + "列]" + "</td>";
}
}
rowNum[j] = rowNum[j] + 1;
} else if(lastNum[j] > 0) {
lastNum[j] = lastNum[j] - 1;
}
}
tStr = tStr + "</tr>";
}
tStr = tStr + "</table>";
return tStr;
}
var datas = [
[{
"id": "01",
"name": "01",
child: 2
}, {
"id": "02",
"name": "02",
child: 2
}],
[{
"id": "01_01",
"name": "01_01"
}, {
"id": "01_02",
"name": "01_02"
}, {
"id": "02_01",
"name": "02_01",
child: 2
}],
[{
"id": "01_01_01",
"name": "01_01_01"
}, {
"id": "01_02_01",
"name": "01_02_01"
}, {
"id": "02_01_01",
"name": "02_01_01"
}, {
"id": "02_01_02",
"name": "02_01_02"
}],
[{
"id": "01_01_01_01",
"name": "01_01_01_01"
}, {
"id": "01_02_01_01",
"name": "01_02_01_01"
}, {
"id": "02_01_01_01",
"name": "02_01_01_01"
}, {
"id": "02_01_02_01",
"name": "02_01_02_01"
}]
];
function outTable2(datas) {
var rowNum = [0, 0, 0,0];
var tStr = "<table border='1'>";
for(var i = 0; i < datas[datas.length - 1].length; i++) {
console.log(i + "行");
tStr = tStr + "<tr>";
var id = datas[datas.length - 1][i].id;
//alert(id);
for(var j = 0; j < datas.length; j++) {
var cols = datas[j]; //每列的所有数据
for(var k = rowNum[j]; k < cols.length; k++) {
if(id.indexOf(cols[k].id) == 0) {
if(cols[k].child) {
tStr = tStr + "<td rowspan='" + cols[k].child + "'> " + cols[k].name + "</td>";
} else {
tStr = tStr + "<td > " + cols[k].name + "</td>";
}
rowNum[j] = rowNum[j] + 1;
break;
}
}
}
tStr = tStr + "</tr>";
}
tStr = tStr + "</table>";
return tStr;
}
var t0 = outTable(datas_0);
document.getElementById("div0").innerHTML = t0;
var t1 = outTable(datas_1);
document.getElementById("div1").innerHTML = t1;
var t3 = outTable2(datas);
document.getElementById("div3").innerHTML = t3;
</script>
</html>
表格合并
猜你喜欢
转载自www.cnblogs.com/required/p/10524337.html
今日推荐
周排行