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

最新推荐文章于 2024-04-16 16:47:39 发布

mengtech

最新推荐文章于 2024-04-16 16:47:39 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 报表 html function

本文链接：https://blog.youkuaiyun.com/mengtech/article/details/1950293

本文介绍了一种使用JavaScript生成复杂HTML表格的方法。通过解析给定的数据结构，该方法能够创建多级表头并根据不同的分类和指标组织数据。适用于需要动态生成报表的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

</div>

<br>

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.youkuaiyun.com/TrackBack.aspx?PostId=1836215