javascript实现多表头分类交叉报表:html表格
marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog.html" frameborder="0" width="728" scrolling="no" height="90">
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
HEAD>
<BODY>
<div id="report">
div>
<br>
<input type="button" value="create" onclick="create()">
<script>
function create()
{
var datas = [
['基期1','分类1','指标1','上期','1'],
['基期1','分类1','指标1','同期','2'],
['基期1','分类1','指标2','上期','3'],
['基期1','分类2','指标1','同期','4'],
['基期1','分类1','指标3','上期','5'],
['基期1','分类2','指标4','同期','6'],
['基期1','分类2','指标4','上期','7'],
['基期1','分类3','指标1','同期','8'],
['基期1','分类3','指标2','上期','9'],
['基期1','分类4','指标1','同期','10'],
['基期2','分类1','指标2','上期','11'],
['基期3','分类1','指标3','上期','12'],
['基期4','分类2','指标1','上期','13'],
['基期4','分类1','指标2','同期','14'],
['基期4','分类2','指标1','同期','15'],
['基期4','分类2','指标1','本季','16'],
['基期4','分类2','指标2','上期','17'],
['基期4','分类1','指标1','上期','18']
];
var row = 0;
var col = 0;
var col1s = [];
var count = datas.length;
var pos = new Array(count);
var rowName = [];
//debugger;
for(i = 0; i < count ; i++)
{
var data = datas[i];
pos[i] = new Object();
pos[i].row = -1;
pos[i].col = -1;
pos[i].value = data[4];
for(j = 0 ; j < rowName.length; j ++)
{
if(rowName[j] == data[0])
{
pos[i].row = j;
break;
}
}
if(pos[i].row == -1)
{
pos[i].row = rowName.length;
rowName.push(data[0]);
}
var col1 = '';
var col2 = '';
var col3 = '';
for(j = 0 ; j < col1s.length; j ++)
{
if(col1s[j].name == data[1])
{
col1 = col1s[j];
break;
}
}
if(col1 == '')
{
col1 = new Object();
col1.name = data[1];
col1.col2s = [];
col1.col = 0;
col1s.push(col1);
}
for(j = 0 ; j < col1.col2s.length; j ++)
{
if(col1.col2s[j].name == data[2])
{
col2 = col1.col2s[j];
break;
}
}
if(col2 == '')
{
col2 = new Object();
col2.name = data[2];
col2.col3s = [];
col1.col2s.push(col2);
}
for(j = 0 ; j < col2.col3s.length; j ++)
{
if(col2.col3s[j].name == data[3])
{
col3 = col2.col3s[j];
col3.index.push(i);
break;
}
}
if(col3 == '')
{
col3 = new Object();
col3.name = data[3];
col3.index = [];
col3.index.push(i);
col2.col3s.push(col3);
col ++;
col1.col ++;
}
}
//col1s[0].
//alert(col);
//alert(col1s[0].col);
var tr = '' + ' ' + '';
var tr2 = '' + ' ' + '';
var tr3 = '' + ' ' + '';
var ind = 0;
for(j = 0 ; j < col1s.length; j ++)
{
tr += '' + col1s[j].col + '">' + col1s[j].name + '' ;
for(i = 0 ; i < col1s[j].col2s.length; i ++)
{
tr2 += '' + col1s[j].col2s[i].col3s.length + '">' + col1s[j].col2s[i].name + '' ;
for(k = 0 ; k < col1s[j].col2s[i].col3s.length; k ++)
{
var node = col1s[j].col2s[i].col3s[k];
tr3 += '' + node.name + '' ;
var indexs = node.index;
for(var l = 0; l < indexs.length; l ++)
{
pos[indexs[l]].col = ind;
}
ind ++;
}
}
}
tr2 += '';
tr3 += '';
tr += '';
tr += tr2;
tr += tr3;
var erow = rowName.length;
for(k = 0; k < erow ; k ++)
{
tr += '' + rowName[k] + '';
for(j = 0 ; j < col; j ++)
{
tr += '' + ' ' + '' ;
}
tr += '';
}
report.innerHTML = '
'
+
tr
+
'
'
;
for
(i
=
0
; i
<
count ; i
++
)
{
var r = pos[i].row + 3;
var c = pos[i].col + 1;
rep.rows[r].cells[c].innerHTML = pos[i].value;
}
}
script
>
BODY
>
HTML
>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>HEAD><BODY><div id="report">div><br><input type="button" value="create" onclick="create()"><script>
function create(){
var datas = [ ['基期1','分类1','指标1','上期','1'], ['基期1','分类1','指标1','同期','2'], ['基期1','分类1','指标2','上期','3'], ['基期1','分类2','指标1','同期','4'], ['基期1','分类1','指标3','上期','5'], ['基期1','分类2','指标4','同期','6'], ['基期1','分类2','指标4','上期','7'], ['基期1','分类3','指标1','同期','8'], ['基期1','分类3','指标2','上期','9'], ['基期1','分类4','指标1','同期','10'], ['基期2','分类1','指标2','上期','11'], ['基期3','分类1','指标3','上期','12'], ['基期4','分类2','指标1','上期','13'], ['基期4','分类1','指标2','同期','14'], ['基期4','分类2','指标1','同期','15'], ['基期4','分类2','指标1','本季','16'], ['基期4','分类2','指标2','上期','17'], ['基期4','分类1','指标1','上期','18'] ]; var row = 0; var col = 0; var col1s = []; var count = datas.length; var pos = new Array(count); var rowName = []; //debugger; for(i = 0; i < count ; i++) { var data = datas[i]; pos[i] = new Object(); pos[i].row = -1; pos[i].col = -1; pos[i].value = data[4]; for(j = 0 ; j < rowName.length; j ++) { if(rowName[j] == data[0]) { pos[i].row = j; break; } } if(pos[i].row == -1) { pos[i].row = rowName.length; rowName.push(data[0]); } var col1 = ''; var col2 = ''; var col3 = ''; for(j = 0 ; j < col1s.length; j ++) { if(col1s[j].name == data[1]) { col1 = col1s[j]; break; } } if(col1 == '') { col1 = new Object(); col1.name = data[1]; col1.col2s = []; col1.col = 0; col1s.push(col1); } for(j = 0 ; j < col1.col2s.length; j ++) { if(col1.col2s[j].name == data[2]) { col2 = col1.col2s[j]; break; } } if(col2 == '') { col2 = new Object(); col2.name = data[2]; col2.col3s = []; col1.col2s.push(col2); } for(j = 0 ; j < col2.col3s.length; j ++) { if(col2.col3s[j].name == data[3]) { col3 = col2.col3s[j]; col3.index.push(i); break; } } if(col3 == '') { col3 = new Object(); col3.name = data[3]; col3.index = []; col3.index.push(i); col2.col3s.push(col3); col ++; col1.col ++; } } //col1s[0]. //alert(col); //alert(col1s[0].col); var tr = '' + ' ' + ''; var tr2 = '' + ' ' + ''; var tr3 = '' + ' ' + ''; var ind = 0; for(j = 0 ; j < col1s.length; j ++) { tr += '' + col1s[j].col + '">' + col1s[j].name + '' ; for(i = 0 ; i < col1s[j].col2s.length; i ++) { tr2 += '' + col1s[j].col2s[i].col3s.length + '">' + col1s[j].col2s[i].name + '' ; for(k = 0 ; k < col1s[j].col2s[i].col3s.length; k ++) { var node = col1s[j].col2s[i].col3s[k]; tr3 += '' + node.name + '' ; var indexs = node.index; for(var l = 0; l < indexs.length; l ++) { pos[indexs[l]].col = ind; } ind ++; } } } tr2 += ''; tr3 += ''; tr += ''; tr += tr2; tr += tr3; var erow = rowName.length; for(k = 0; k < erow ; k ++) { tr += '' + rowName[k] + ''; for(j = 0 ; j < col; j ++) { tr += '' + ' ' + '' ; } tr += ''; } report.innerHTML = '
'
+
tr
+
'
'
;
for
(i
=
0
; i
<
count ; i
++
)
{ var r = pos[i].row + 3; var c = pos[i].col + 1; rep.rows[r].cells[c].innerHTML = pos[i].value; }
}
script
>
BODY
>
HTML
>