首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>javascript实现多表头分类交叉报表代码
javascript实现多表头分类交叉报表代码
来源: 发布时间:2007-10-23 发布人: 浏览: 人次   字体: [ ]  
<!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>

相 关 文 章   发布商链接
·javacript常用的验证方法小结
·Javascript在IE和FireFox中的不同...
·Javascript如何控制CheckBox的全选与...
·单选框单击出现相应的JS说明代码
·JavaScript将table中选择的数据导出...
·javascript实现类似IE7中的Tab效果
·js实现select 控件的option添加,移除...
·在拷贝内容时增加版权信息的JavaScri...
·js操作innerHTML 引起的未知运行时错...
·JS实现多行的HTML静态表格分页代码
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·javscript实现鼠标移到小图片
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档