Use js to dynamically stitch multi-level table rendering based on data
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生拼接动态表格
</title>
<style>
#showDoms .yiji{
background-color: #D3EEFF;
border: 1px solid #86BDEC;
text-align: center;
font-size:14px;
}
#showDoms .items{
background-color: #E2EFFF;
border: 1px solid #86BDEC;
padding: 5px;
font-size:14px;
}
#showDoms .item{
border: 1px solid #86BDEC;
width: 7%;
background-color: #F0F0F0;
padding: 5px;
font-size:14px;
}
#showDoms .itemss{
border: 1px solid #86BDEC;
background-color: #E7EFF4;
padding: 5px;
font-size:14px;
}
#showDoms .itemName{
border: 1px solid #86BDEC;
width: 7%;
background-color: rgb(229 236 244);
padding: 5px;
font-size:14px;
}
#contentTop{
display: flex;
justify-content: center;
margin: 10px 0px 10px 0px;
}
#Btn{
width: 80px;
height: 30px;
background-color: #80bdf1;
border: none;
border-radius: 2px;
margin-left: 10px;
}
#Btn:hover{
background-color: #207dce;
cursor: pointer;
}
#Rest{
width: 80px;
height: 30px;
background-color: #80bdf1;
border: none;
border-radius: 2px;
margin-left: 10px;
}
#Rest:hover{
background-color: #207dce;
cursor: pointer;
}
#input{
width: 200px;
height: 25px;
}
</style>
</head>
<body>
<div id="contentTop">
<input placeholder="请输入编号查询" id="input"/>
<button id="Btn">查询</button>
<button id="Rest">重置</button>
</div>
<div id="showDoms">
</div>
<script>
var autoModules=[];
var modules={};
var hideParam={};
var btn=document.getElementById('Btn')
var rest=document.getElementById('Rest')
var input=document.getElementById('input')
btn.addEventListener('click',function(){
var list=[
{fstName:'申请信息',nextPgWthrExstInd:'Y',
child:[
{clNm:'申请信息',ruleNm:'产品类型',ruleExp:'吃喝玩乐',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'申请信息',ruleNm:'受理模式',ruleExp:'--',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'申请信息',ruleNm:'来源渠道',ruleExp:'不想上班',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'3',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'申请信息',ruleNm:'分期总额',ruleExp:'50000',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'申请信息',ruleNm:'期数',ruleExp:'-',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'申请信息',ruleNm:'月还款额',ruleExp:'2188.66',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'3',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
]
},
{fstName:'环节结论',nextPgWthrExstInd:'Y',
child:[
{clNm:'环节结论',ruleNm:'领导结论',ruleExp:'--',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'4',lvL2CLNm:'',rltvAvyNodeRuleDsc:'<p style="color:red">丑拒❌</p>'},
{clNm:'环节结论',ruleNm:'人员编号',ruleExp:'12345678',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'4',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'环节结论',ruleNm:'领导意见',ruleExp:'众所周知钓鱼岛一直都是中国的，台湾也是！',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'9',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
{clNm:'环节结论',ruleNm:'拒绝理由',ruleExp:'莫须有，就问你服不服！',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'9',lvL2CLNm:'',rltvAvyNodeRuleDsc:''},
]
},
{
fstName:'申请人信息',nextPgWthrExstInd:'Y',
sndList:[
{sndName:'基本信息',nextPgWthrExstInd:'Y',
child:[
{clNm:'申请人信息',ruleNm:'姓名',ruleExp:'钱三一',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'性别',ruleExp:'男',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'年龄',ruleExp:'26',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'学历',ruleExp:'博士',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'年收入(万)',ruleExp:'40',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'8',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:'<P style="color:red">我觉得你填写得不好</p>'},
{clNm:'申请人信息',ruleNm:'工作单位地址',ruleExp:'上海浦东新区银城中路上海中心99楼',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'8',lvL2CLNm:'基本信息',rltvAvyNodeRuleDsc:'<P style="color:red">不通过，因为我今天不开心！</p>'},
]
},
{sndName:'征信报告情况',nextPgWthrExstInd:'Y',
child:[
{clNm:'申请人信息',ruleNm:'成绩报告状态',ruleExp:'--',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'8',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'导师评价',ruleExp:'--',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'3',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'院长寄语',ruleExp:'--',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'4',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'平时爱好',ruleExp:'-',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'学术报告',ruleExp:'-',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'在校情况',ruleExp:'-',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'1',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
{clNm:'申请人信息',ruleNm:'毕业状态',ruleExp:'-',nextPgWthrExstInd:'Y',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'征信报告情况',rltvAvyNodeRuleDsc:''},
]
}
]
},
{
fstName:'人工判断',nextPgWthrExstInd:'N',
sndList:[
{sndName:'收入情况',nextPgWthrExstInd:'N',
child:[
{clNm:'人工判断',ruleNm:'公积金',ruleExp:'2000元/月',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'3',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'是否满足稳定收入条件',ruleExp:'是',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'社保缴纳',ruleExp:'1800元/月',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'个税月收入',ruleExp:'-',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'代发工资月收入',ruleExp:'50000元/月',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'2',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'房贷月还款额',ruleExp:'5000元/月',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'3',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
{clNm:'人工判断',ruleNm:'信用卡额度',ruleExp:'5000000',nextPgWthrExstInd:'N',drhdWdth:'1',lyrWdth:'9',lvL2CLNm:'收入情况',rltvAvyNodeRuleDsc:''},
]
},
]
},
]
if(input.value!=""){
document.getElementById('showDoms').style.display="block";
showTable(list)
}else{
alert('查询条件不能为空！')
}
})
rest.addEventListener('click',function(){
input.value=""; // 清空输入框的值
document.getElementById('showDoms').style.display="none"; // 重置查询条件后表格应该清除不渲染
})
function showTable(list){
this.autoModules=[];
var self=this;
var COLSNUM=10;
var itemStr="";
var valueStr="";
var mylist=list;
var table="<table style='border:1px solid #86BDEC;border-collapse:collapse;width:100%'><tr><th colspan='11' style='background-color:#86BDEC;padding:8px;font-weight:bold;letter-spacing:3px;font-size:16px;color:#FFF'>数据详情信息</th><th class='titleTwo' width='20%' colspan='1' style='background-color:#86BDEC;padding:8px;font-weiht:bold;letter-spacing:3px;font-size:16px;color:#FFF'>提示信息</th></tr>"
for(var i=0;i<mylist.length;i++){ // 一级分类
var tipLine=mylist[i].nextPgWthrExstInd; // 通过nextPgWthrExstInd的值判断是否有提示信息这一格
COLSNUM=tipLine=='N'?11:10;
var fstItems=mylist[i].child;
var sndList=mylist[i].sndList;
if(mylist[i].fstName=="system"){
for(var j=0;j<fstItems.length;j++){
self.transParam(fstItems[j].ruleExp)
}
continue
}
var temp=0;
mylist[i].rows=1; // 该一级分类占据行数
table=table+"<tr><td class='yiji' rowspan='${ROWS}' width='10%' style='background-color:#D3EEFF;border:1px solid #86BDEC;text-align:center;'>"+mylist[i].fstName+"</td>" // 大类列
var tipctx="";
if(fstItems){ // 一级分类项
for(var j=0;j<fstItems.length;j++){
var kk=COLSNUM-temp;
temp=temp+Number(fstItems[j].drhdWdth)+Number(fstItems[j].lyrWdth); // 单行占据宽度
if(Number(fstItems[j].drhdWdth)>0){
itemStr="<td class='itemName' colspan='"+fstItems[j].drhdWdth+"'>"+fstItems[j].ruleNm+"</td>"
}else{
itemStr=""
}
if(Number(fstItems[j].lyrWdth)>0){
valueStr="<td class='item' colspan='"+fstItems[j].lyrWdth+"'>"+self.transNode(fstItems[j].ruleExp)+"</td>"
}else{
valueStr=""
}
if(temp>COLSNUM){ // 大于一行了
mylist[i].rows++;
temp=Number(fstItems[j].drhdWdth)+Number(fstItems[j].lyrWdth);
table=table+self.fillTd(kk)+(tipLine=='N'?"":"<td class='itemss'>"+tipctx+"</td>")+"</tr><tr>"+itemStr+valueStr; // 填充不足的td
tipctx=""
}else{
table=table+itemStr+valueStr; // 填充不足的td
}
if(fstItems[j].rltvAvyNodeRuleDsc){
if(tipctx){
tipctx=tipctx+"<br />"+fstItems[j].rltvAvyNodeRuleDsc
}else{
tipctx=fstItems[j].rltvAvyNodeRuleDsc
}
}
}
table=table+self.fillTd(COLSNUM-temp)+(tipLine=='N'?"":"<td class='itemss'>"+tipctx+"</td>")+"</tr>"
tipctx=""
}
if(sndList){ // 二级列表
for(var k=0;k<sndList.length;k++){
var sndItems=sndList[k].child;
sndList[k].rows=1;
mylist[i].rows++;
temp=0;
table=table+"<tr><td rowspan='${SND_ROWS}' style='background-color:#E2EFFF;border:1px solid #86BDEC;padding:5px;font-size:14px;'>"+sndList[k].sndName+"</td>"; // 二级类列
for(var m=0;m<sndItems.length;m++){
var ss=COLSNUM-temp-1;
temp=temp+Number(sndItems[m].drhdWdth)+Number(sndItems[m].lyrWdth); // 单项占据宽度
if(Number(sndItems[m].drhdWdth)>0){
itemStr="<td class='itemName' colspan='"+sndItems[m].drhdWdth+"'>"+sndItems[m].ruleNm+"</td>"
}else{
itemStr=""
}
if(Number(sndItems[m].lyrWdth)>0){
valueStr="<td class='item' colspan='"+sndItems[m].lyrWdth+"'>"+self.transNode(sndItems[m].ruleExp)+"</td>"
}else{
valueStr=""
}
if(temp>COLSNUM-1){ // 大于一行了
mylist[i].rows++;
sndList[k].rows++;
temp=Number(sndItems[m].drhdWdth)+Number(sndItems[m].lyrWdth);
table=table+self.fillTd(ss)+(tipLine=='N'?"":"<td class='itemss'>"+tipctx+"</td>")+"</tr><tr>"+itemStr+valueStr; // 填充不足的td
tipctx=""
}else{
table=table+itemStr+valueStr; // 填充不足的td
}
if(sndItems[m].rltvAvyNodeRuleDsc){
if(tipctx){
tipctx=tipctx+"<br />"+sndItems[m].rltvAvyNodeRuleDsc
}else{
tipctx=sndItems[m].rltvAvyNodeRuleDsc
}
}
}
table=table+self.fillTd(COLSNUM-temp-1)+(tipLine=='N'?"":"<td class='itemss'>"+tipctx+"</td>")+"</tr>"; // 填充不足的td
table=table.replace("${SND_ROWS}",sndList[k].rows)
tipctx=""
}
}
table=table.replace("${ROWS}",mylist[i].rows)
}
document.getElementById("showDoms").innerHTML=table;
}
function transNode(ruleExp){
if(ruleExp && ruleExp.indexOf('$$')==0){
var info=ruleExp.split("$");
if(info[2]=='V'){ // 展示的值，且需要用于计算
this.hideParam[info[3]]=info[4];
return info[4]
}else if(info[2]=='I'){
this.autoModules.push(info);
ruleExp="<input id='"+info[3]+"' />"+(info[4]||"");
}else{
this.autoModules.push(info);
ruleExp="<div id='"+info[3]+"'></div>";
}
}
return ruleExp
}
function transParam(ruleExp){
if(ruleExp && ruleExp.indexOf('$$')==0){
var info=ruleExp.split("$");
this.hideParam[info[3]]=info[4];
}
}
function fillTd(num){
if(num==0)return "";
return "<td class='item' colspan='"+num+"'> </td>"
}
</script>
</body>
</html>