html中动态分级表头的实现

来源：互联网发布：交换机网管软件编辑：程序博客网时间：2024/05/01 20:47

<!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>