javascript实现多表头分类交叉报表: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 = '<tr><td>' + ' &nbsp;' + '</td>';
    var tr2 = '<tr><td>' + ' &nbsp;' + '</td>';
    var tr3 = '<tr><td>' + ' &nbsp;' + '</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>' + ' &nbsp;' + '</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 >