使用JavaScript排列页面表格
描述：服务器生成后台数据传输到页面，并用JS数组的形式暂存在静态页面，现在要通过JS生成一个表格将这些数组元素显示在表格中，而js的表格实现和具体数据内容无关。
这里随便在网上找一些数据，任意改一下内容，关键是数据的结构和函数实现，所以不要在乎内容。
注：数组的数据结构中，parent为null的在生成的表格中是根节点，非空的为子节点，classifyArray数组生成表格左边两列，contentArray数组生成表格右边两列，当classifyArray数组的特定元素的id和contentArray数组的特定元素的classify相同时说明该元素和classifyArray的那个特定元素具有对应关系，即为子节点的子节点
//函数主体
<script type="text/javascript">
function show1(classifyArray,contentArray){
//寻找根节点
for(var i=1;i<classifyArray.length;i++){
if(classifyArray[i].parent=='null'){
var rootTotal='';
var num=0;
var judge='false';
//寻找子节点
for(var j=1;j<classifyArray.length;j++){
if(classifyArray[j].parent==classifyArray[i].id){
judge='true';
var sonNum=0;
var smallTotal1='';
var smallTotal2='';
//寻找孙子节点(内容和来源)
for(var k=1;k<contentArray.length;k++){
if(contentArray[k].classify==classifyArray[j].id){
if(sonNum==0){
smallTotal1='<td>'+contentArray[k].title+'</td><td>'+ contentArray[k].org+'</td></tr>';
}
else
{smallTotal2 +='<tr><td>'+contentArray[k].title+'</td><td>'+ contentArray[k].org+'</td></tr>';}
sonNum++;
num++;
}
}
if(sonNum>0){
if(num==sonNum){ rootTotal='<td rowspan=" '+(sonNum>0?sonNum:1)+'">'+classifyArray[j].name+'</td>'+smallTotal1+smallTotal2; }
else{rootTotal=rootTotal+'<tr><td rowspan="'+(sonNum>0?sonNum:1)+'">'+classifyArray[j].name+'</td>'+smallTotal1+smallTotal2; }
}else{
rootTotal='<td>'+classifyArray[j].name+'</td><td>'+' '+'</td><td>'+' '+'</td></tr>';
}
}
}
//当一个根节点没有子节点，但是有孙子节点的情况
if(judge=='false'){
for(var f=0;f<contentArray.length;f++){
if(contentArray[f].classify==classifyArray[i].id)
{
if(num==0)
{rootTotal ='<td>'+contentArray[f].title+'</td><td>'+contentArray[f].org+'</td></tr>';}
else{
rootTotal=rootTotal+'<tr><td>'+contentArray[f].title+'</td><td>'+contentArray[f].org+'</td></tr>';}
num++;
}
}
}
if(num!=0&&judge=='true'){rootTotal='<tr><td rowspan="'+(num>0?num:1)+'">'+classifyArray[i].name+'</td>'+rootTotal; document.write(rootTotal);
}else if(num!=0&&judge=='false')
{ rootTotal='<tr><td rowspan=" '+(num>0?num:1)+'" '+'colspan="2" '+'>'+classifyArray[i].name+'</td>'+rootTotal;
document.write(rootTotal);
}
}
}
}
</script>//页面内数据结构
<body>
<TABLE width="100%" class="Ntable" id="content1" border="2" cellspacing="0" cellpadding="0">
<TR>
<TH width="16%" colspan="2">指标类型</TH>
<TH>指标内容</TH>
<TH width="16%">数据来源单位</TH></TR>
<!--<TR>-->
<script type="text/javascript">
var classifyArray =
[{id:-1,name:"",priority:-1,display:"",parent:null,years:""}
,
{
id:19,
name:"根节点ff",
priority:1,
parent:'null',
years:"2013/2015/2014/"
}
,
{
id:20,
name:"根节点￥￥",
priority:2,
parent:'null',
years:"2013/2015/2014/2016/"
}
,
{
id:21,
name:"根节点22",
priority:3,
parent:'null',
years:""
}
,
{
id:22,
name:"根节点ss",
priority:4,
parent:'null',
years:""
}
,
{
id:31,
name:"根节点aaa",
priority:4,
parent:'null',
years:""
}
,
{
id:15,
name:"根节点xxx",
priority:5,
parent:'null',
years:""
}
,
{
id:18,
name:"根节点kk",
priority:6,
parent:'null',
years:""
}
,
{
id:14,
name:"根节点cc",
priority:7,
parent:'null',
years:""
}
,
{
id:1,
name:"根节点ghg",
priority:10,
parent:'null',
years:""
}
,
{
id:2,
name:"根节点gk",
priority:10,
parent:'null',
years:""
}
,
{
id:3,
name:"子节点dd",
priority:10,
parent:2,
years:""
}
,
{
id:4,
name:"子节点51",
priority:10,
parent:2,
years:""
}
,
{
id:5,
name:"子节点kk",
priority:10,
parent:2,
years:""
}
,
{
id:6,
name:"子节点oo",
priority:10,
parent:2,
years:""
}
,
{
id:7,
name:"子节点jj",
priority:10,
parent:2,
years:""
}
,
{
id:8,
name:"子节点4848",
priority:10,
parent:2,
years:""
}
,
{
id:9,
name:"根节点dduu",
priority:10,
parent:'null',
years:""
}
,
{
id:10,
name:"根节点dduu8",
priority:10,
parent:'null',
years:""
}
,
{
id:11,
name:"根节点dduu",
priority:10,
parent:'null',
years:""
}
,
{
id:12,
name:"根节点dduu54",
priority:10,
parent:'null',
years:""
}
,
{
id:17,
name:"根节点dduuss",
priority:10,
parent:'null',
years:""
}
,
{
id:23,
name:"子节点sdsd",
priority:10,
parent:19,
years:""
}
,
{
id:24,
name:"子节点ddusd",
priority:10,
parent:19,
years:""
}
,
{
id:25,
name:"子节点fjk",
priority:10,
parent:19,
years:""
}
,
{
id:26,
name:"子节点ghg",
priority:10,
parent:19,
years:""
}
,
{
id:27,
name:"子节点jkokmj",
priority:10,
parent:20,
years:""
}
,
{
id:28,
name:"子节点tjhthgsr",
priority:10,
parent:21,
years:""
}
,
{
id:29,
name:"子节点ajkdhfjk",
priority:10,
parent:22,
years:""
}
,
{
id:30,
name:"子节点jahgui",
priority:10,
parent:22,
years:""
}
,
{
id:13,
name:"子节点hguigyu",
priority:11,
parent:'null',
years:""
}
,
{
id:16,
name:"根节点ahsdfyh",
priority:12,
parent:'null',
years:""
},
{
id:666,
name:"我来找茬",
priority:12,
parent:'null',
years:""
}
];
var contentArray=[
{id:-1,chart:0}
,{
id:7967,
title:"二七滨江商务区建设（整体规划管控，推进周大福金融中心项目建设，基础设施建设，现代服务业项目引进）/汉口科技新城建设（征收拆迁、足联超级杯场馆及配套项目建设）",
classify:23,
org:""
}
,{
id:7970,
title:"旧城改造征收面积60万平方米，启动重点类棚改项目2个，城中村改造拆迁面积100万平方米/城建重点工程征地征收/新建微循环路10条/新建停车泊位2800个",
classify:23,
org:""
}
,{
id:7994,
title:"招商引资总额增长28%/固定资产投资增长10%/地区生产总值增长9%/服务业增加值增长10%/社会消费品零售总额增长12%/实际利用外资增长20%/外贸出口增长5%/地方一般公共预算收入增长11%/高新技术产业产值增长15%/新增高新技术企业10家/新增、净增“四上”企业和“个转企”数",
classify:23,
org:""
}
,{
id:8123,
title:"青岛路片历史风貌区建设/实施“文明城市提升工程”/中共中央机关旧址纪念馆周边环境保护和景观整治",
classify:24,
org:""
}
,{
id:8133,
title:"创新社会治理加强基层建设（深化街道体制改革，推进社区多元共治，深化拓展网格化服务管理，完善社区治理体系，放大百步亭示范效应）/城市综合管理/社会治安综合治理/安全生产/保持社会稳定，做好信访工作",
classify:25,
org:""
}
,{
id:8148,
title:"基础教育提升，中小学配建/计划生育/食品药品安全/创建全国质量强市示范城市",
classify:25,
org:""
}
,{
id:8159,
title:"生态控制线保护/湖泊保护，水污染防治/绿道建设10公里/新建街头小公园3个/府河生态绿楔建设",
classify:26,
org:""
}
,{
id:8172,
title:"单位GDP能耗、水耗、地耗降低率/单位GDP二氧化碳排放降低率/主要污染物总量减排/PM10、PM2.5平均浓度降低率",
classify:26,
org:""
}
,{
id:8177,
title:"“创谷计划”/“城市合伙人计划”/“互联网+”产业创新工程/推进“三村”农村集体产权制度改革",
classify:27,
org:""
}
,{
id:8184,
title:"重大决策合法率，规范性文件合法率，行政机关负责人依法出庭应诉率，行政复议诉讼败诉率，政务公开",
classify:28,
org:""
}
,{
id:8188,
title:"落实管党治党责任（落实党建责任清单、党风廉政建设“两个责任”，开展“两学一做”学习教育，落实意识形态工作责任制，严肃换届纪律、加强换届风气监督）/统一战线工作",
classify:29,
org:""
}
,{
id:8196,
title:"加强作风建设，深化治庸问责，突出问题整改/办理市长专线投诉件工作",
classify:30,
org:""
},
{
id:8198,
title:"啦啦啦啦啦啦啦啦啦啦",
classify:666,
org:"啊实打实大苏打"
}
,
{
id:8199,
title:"啦啦啦啦啦啦啦啦啦啦",
classify:666,
org:"啊实打实大打"
}
];
//在这里引用函数 show(classifyArray,contentArray);
</script>
</TABLE>
</body>
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
