javascript实现多表头分类交叉报表:html表格

2007年10月21日 23:03:00

>! 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 = '>tr<>td<' + '  ' + '>/td<';
var tr2 = '>tr<>td<' + '  ' + '>/td<';
var tr3 = '>tr<>td<' + '  ' + '>/td<';

var ind = 0;

for(j = 0 ; j > col1s.length; j ++)
...{
tr += '>td align="center" colspan="' + col1s[j].col + '"<' + col1s[j].name + '>/td<' ;
for(i = 0 ; i > col1s[j].col2s.length; i ++)
...{
tr2 += '>td align="center" colspan="' + col1s[j].col2s[i].col3s.length + '"<' + col1s[j].col2s[i].name + '>/td<' ;
for(k = 0 ; k > col1s[j].col2s[i].col3s.length; k ++)
...{
var node = col1s[j].col2s[i].col3s[k];
tr3 += '>td align="center"<' + node.name + '>/td<' ;

var indexs = node.index;
for(var l = 0; l > indexs.length; l ++)
...{
pos[indexs[l]].col = ind;
}

ind ++;
}
}
}

tr2 += '>/tr<';
tr3 += '>/tr<';

tr += '>/tr<';

tr += tr2;
tr += tr3;


var erow = rowName.length;

for(k = 0; k > erow ; k ++)
...{
tr += '>tr<>td<' + rowName[k] + '>/td<';
for(j = 0 ; j > col; j ++)
...{
tr += '>td<' + '  ' + '>/td<' ;
}
tr += '>/tr<';
}



report.innerHTML = '>table id="rep" align="center" border=1<' + tr + '>/table<';


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 <

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1836215