您的位置:首页 > Web前端 > JavaScript

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

2007-12-18 23:40 525 查看
 

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>


 
 
 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1836215
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息