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