Recently, I have made a user management system, which has project requirements and requires using js to generate a form with indentation. This is really stumping me. This function is realized by looking up relevant information. The following editor takes notes to the implementation code, which is convenient for future searches. At the same time, I also hope that friends who have the same needs as me can make a reference. If there is a better method, leave me a message, thank you!
js makes the following form:
json
[{"id":302,"serviceId":15,"name":"data","type":"JsonObject","paramDesc":"Return query information","value":"","comment":"","parentId":-1,"childrenParam":[{"id":305,"serviceId":15,"name":"info","type":"JsonObject","paramDesc":"Query content","value":"","comment":"","parentId":302,"childrenParam":[{"id":312,"service Id":15,"name":"entInvList","type":"List","paramDesc":"Enterprise foreign investment situation","value":"","comment":"","parentId":305,"childrenParam":[{"id":343,"serviceId":15,"name":"regNo","type":"String","paramDesc":"regregistration number","value":"","comment":"","parentId":312,"childrenParam":null},{"id":342,"serviceId":15,"name":"r egCapCur","type":"String","paramDesc":"registered capital currency","value":"","comment":"","parentId":312,"childrenParam":null},{"id":341,"serviceId":15,"name":"regCap","type":"String","paramDesc":"regcap (10,000 yuan),"value":"","comment":"","parentId":312,"childrenParam":null},{"id":340,"serviceId":15,"name":"ent_nam e","type":"String","paramDesc":"Legal representative's name","value":"","comment":"","parentId":312,"childrenParam":null},{"id":339,"serviceId":15,"name":"fundedRatio","type":"String","paramDesc":"Contribution ratio","value":"","comment":"","parentId":312,"childrenParam":null},{"id":338,"serviceId":15,"name":"esDate","type e":"String","paramDesc":"Opening date","value":"","comment":"","parentId":312,"childrenParam":null},{"id":337,"serviceId":15,"name":"error","type":"String","paramDesc":"subscribed capital (10,000 yuan)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":336,"serviceId":15,"name":"entType","type":"Strin g","paramDesc":"enterprise (institution) type","value":"","comment":"","parentId":312,"childrenParam":null},{"id":345,"serviceId":15,"name":"revDate","type":"String","paramDesc":"revod date","value":"","comment":"","parentId":312,"childrenParam":null},{"id":344,"serviceId":15,"name":"regOrg","type":"String","paramD esc":"Registering authority","value":"","comment":"","parentId":312,"childrenParam":null},{"id":334,"serviceId":15,"name":"currency","type":"String","paramDesc":"subscribed capital currency","value":"","comment":"","parentId":312,"childrenParam":null},{"id":335,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"ententStatus","type":"paramDesc":"entCompany Status","value":"","comment":"","parentId":312,"childrenParam":null},{"id":333,"serviceId":15,"name":"canDate","type":"String","paramDesc":"Login date","value":"","comment":"","parentId":312,"childrenParam":null}]},{"id":346,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"ent name","value ":"","comment":"","parentId":305,"childrenParam":null},{"id":311,"serviceId":15,"name":"basic","type":"JsonObject","paramDesc":"Basic Information","value":"","comment":"","parentId":305,"childrenParam":[{"id":326,"serviceId":15,"name":"opScope","type":"String","paramDesc":"Business (business) scope","value":"","com ment":"","parentId":311,"childrenParam":null},{"id":327,"serviceId":15,"name":"opTo","type":"String","paramDesc":"operation term to YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":324,"serviceId":15,"name":"industryPhy","type":"String","paramDesc":"National Economic Industry Code","value":"",""," comment":"","parentId":311,"childrenParam":null},{"id":325,"serviceId":15,"name":"opFrom","type":"String","paramDesc":"Operation term is from YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":322,"serviceId":15,"name":"frName","type":"String","paramDesc":"Determined as the name of the representative is the legal representative, and the self-employed is negative The person in charge was named","value":","comment":"","parentId":311,"childrenParam":null},{"id":323,"serviceId":15,"name":"industryCo","type":"String","paramDesc":"Industry category code","value":"","comment":"","parentId":311,"childrenParam":null},{"id":320,"serviceId":15,"name":"entType","type":"String","paramDesc":"Enterprise (institution) type has Limited liability companies, etc.","value":","comment":"","parentId":311,"childrenParam":null},{"id":321,"serviceId":15,"name":"esDate","type":"String","paramDesc":"Opening date YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":332,"serviceId":15,"name":"revDate","type":"String","paramDesc":"Revoked Date YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":330,"serviceId":15,"name":"regNo","type":"String","paramDesc":"registration number","value":"","comment":"","parentId":311,"childrenParam":null},{"id":331,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"registration authority","va lue":"","comment":"","parentId":311,"childrenParam":null},{"id":328,"serviceId":15,"name":"regCap","type":"String","paramDesc":"registered capital unit: 10,000 yuan","value":"","comment":"","parentId":311,"childrenParam":null},{"id":329,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"currency RMB, US dollar, etc.","valu e":"","comment":"","parentId":311,"childrenParam":null},{"id":313,"serviceId":15,"name":"OPSCOANDFORM","type":"String","paramDesc":"Scope and method of operation (business)","value":"","comment":"","parentId":311,"childrenParam":null},{"id":315,"serviceId":15,"name":"ancheYear","type":"String","paramDesc":"Last annual inspection YYYYY ","value":"","comment":"","parentId":311,"childrenParam":null},{"id":314,"serviceId":15,"name":"abuItem","type":"String","paramDesc":"licensed business project","value":"","comment":"","parentId":311,"childrenParam":null},{"id":317,"ser viceId":15,"name":"cbuItem","type":"String","paramDesc":"General business project","value":"","comment":"","parentId":311,"childrenParam":null},{"id":316,"serviceId":15,"name":"canDate","type":"String","paramDesc":"Logout date YYYY-MM-DD","val ue":"","comment":"","parentId":311,"childrenParam":null},{"id":319,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"operation status in operation, revocation, cancellation, other","value":"","comment":"","parentId":311,"childrenParam":null},{"id":318 ,"serviceId":15,"name":"dom","type":"String","paramDesc":"address","value":"","comment":"","parentId":311,"childrenParam":null}]}]},{"id":304,"serviceId":15,"name":"result","type":"String","paramDesc":"Verification result","value":"match| not_match| Not_found","comment":"","parentId":302,"childrenParam":null},{"id":303,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"Interface return status","value":"","comment":"","parentId":302,"childrenParam":null}]},{"id":306,"serviceId": 15,"name":"api_status","type":"JsonObject","paramDesc":"return status code","value":"","comment":"","parentId":-1,"childrenParam":[{"id":307,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"interface return status","value":"","comment":"","pare ntId":306,"childrenParam":null},{"id":309,"serviceId":15,"name":"description","type":"String","paramDesc":"return status description","value":"","comment":"","parentId":306,"childrenParam":null},{"id":308,"serviceId":15,"name":"code","type":"St ring","paramDesc":"status code","value":"","comment":"","parentId":306,"childrenParam":null},{"id":310,"serviceId":15,"name":"serial_no","type":"String","paramDesc":"flow number","value":"","comment":"","parentId":306,"childrenParam":null}]}]js
//Api page output parameter description var APItoHTML_outParamFn = function(json,returnExample){var html=''var mustArr = ['required','optional']var paramHtml = ''var data = $.parseJSON(json);console.log(data)// name: parameter English name// type: parameter type// paramDesc: parameter Chinese definition// value: parameter assignment description// comment: parameter other description// childrenParam: child parameter list console.log('--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- bbb = []var c=[]dataFormatFn2(data,flagI)// Statistics the number of subclasses// Each node adds the len attribute to count the sum of the child node and the child node function dataFormatFn2(data){for (var i = 0; i < data.length; i++) {bbb[i]=0bbb[i]=dataFormatFn(data[i],0,bbb[i],c )};// data to htmlparamHtml = jsontohtml(data,0);}function dataFormatFn(data,flagI,b,c){data.len = (data.childrenParam && data.childrenParam.length)||1// debugger// console.log(data)c = c||[]if(data.childrenParam){for (var i = 0; i < data.childrenParam.length; i++) {b++data.len += dataFormatFn(data.childrenParam[i], flagI+1,b ,c[i])};return data.len}else{return (data.childrenParam && data.childrenParam.length) ||0}}console.log(bbb)console.log(data)var flagI = 0// After moving to dataformataFn2, execute // paramHtml = jsontohtml(data,flagI);function jsontohtml(data,flagI,len){var paramHtml='';var nbspArr =['','<b>Ⅰ</b>','<b>Ⅱ</b>','<b>Ⅲ</b>','<b>Ⅵ</b>','<b>Ⅴ</b>','<b>Ⅵ</b>','<b>Ⅶ</b>','<b>Ⅷ</b>','<b>Ⅸ</b>','<b>Ⅹ</b>']for(var i=0;i<data.length;i++){var str2 = ''var span = 1if( i==0 && flagI>0 && len>1){span = (10-flagI)str2 = '<td rowspan="'+ (len) +'"></td>'}else{span = (10-flagI)}paramHtml += '<tr>/'+ str2 +'/<td colspan="'+ span +'"><nobr>'+ nbspArr[flagI] + data[i].name +'</nobr></td>/<td>'+ data[i].type +'</td>/<td>'+ data[i].paramDesc +'</td>/<td>'+ data[i].value +'</td>/<td>'+ data[i].comment +'</td>/</tr>'if(data[i].childrenParam){paramHtml += jsontohtml(data[i].childrenParam,flagI+1,data[i].len)}else{flagI}}return paramHtml}console.log('--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- colspan="10"><nobr>Parameter English name</nobr></th>/<th><nobr>Parameter type</nobr></th>/<th><nobr>Chinese definition</nobr></th>/<th><nobr>Parameter assignment description</nobr></th>/<th><nobr>Other instructions</nobr></th>/</tr>/</thead>/<tbody>/'+ paramHtml +'/</tbody>/</table>/</div>/</dd>'$('#outParam dl').html(html);} html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js generates indented table</title></head><body><div id="outParam"><dl></dl></div></body></html> Complete code: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js generates indented table</title><link rel="stylesheet" type="text/css" media="screen" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"></head><body><div id="outParam"><dl >/dl></div><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>var json='[{"id":302,"serviceId":15,"name":"data","type":"JsonObject","paramDesc":"Return query information","value":"","comment":"","parentId":-1,"childrenParam":[{"id":305,"serviceId":15,"name":"info","type":"JsonObject","paramDesc":"query content","value":"","comment":"","parentId":302,"childrenParam":[{"id":312,"se rviceId":15,"name":"entInvList","type":"List","paramDesc":"Enterprise foreign investment situation","value":"","comment":"","parentId":305,"childrenParam":[{"id":343,"serviceId":15,"name":"regNo","type":"String","paramDesc":"regregistration number","value":"","comment":"","parentId":312,"childrenParam":null},{"id":342,"serviceId":15,"nam e":"regCapCur","type":"String","paramDesc":"regcapCurrent","value":"","comment":"","parentId":312,"childrenParam":null},{"id":341,"serviceId":15,"name":"regCap","type":"String","paramDesc":"regcap (10,000 yuan),"value":"","comment":"","parentId":312,"childrenParam":null},{"id":340,"serviceId":15,"name":"en t_name","type":"String","paramDesc":"Legal representative name","value":"","comment":"","parentId":312,"childrenParam":null},{"id":339,"serviceId":15,"name":"fundedRatio","type":"String","paramDesc":"Contribution ratio","value":"","comment":"","parentId":312,"childrenParam":null},{"id":338,"serviceId":15,"name":"esDate" ,"type":"String","paramDesc":"open date","value":"","comment":"","parentId":312,"childrenParam":null},{"id":337,"serviceId":15,"name":"error","type":"String","paramDesc":"subscribed capital (10,000 yuan)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":336,"serviceId":15,"name":"entType","type":"S twist","paramDesc":"enterprise (institutional) type","value":"","comment":"","parentId":312,"childrenParam":null},{"id":345,"serviceId":15,"name":"revDate","type":"String","paramDesc":"revod date","value":"","comment":"","parentId":312,"childrenParam":null},{"id":344,"serviceId":15,"name":"regOrg","type":"String","pa ramDesc":"Registering Authority","value":"","comment":"","parentId":312,"childrenParam":null},{"id":334,"serviceId":15,"name":"currency","type":"String","paramDesc":"subscribed capital currency","value":"","comment":"","parentId":312,"childrenParam":null},{"id":335,"serviceId":15,"name":"entStatus","type":"String","paramDesc" :"ent_name","type":"paramDesc":"","parentId":312,"childrenParam":null},{"id":333,"serviceId":15,"name":"canDate","type":"String","paramDesc":"Login date","value":"","comment":"","parentId":312,"childrenParam":null}]},{"id":346,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"ent name","va lue":"","comment":"","parentId":305,"childrenParam":null},{"id":311,"serviceId":15,"name":"basic","type":"JsonObject","paramDesc":"enterprise information","value":"","comment":"","parentId":305,"childrenParam":[{"id":326,"serviceId":15,"name":"opScope","type":"String","paramDesc":"operation (business) scope","value":"","c oment":"","parentId":311,"childrenParam":null},{"id":327,"serviceId":15,"name":"opTo","type":"String","paramDesc":"operation term to YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":324,"serviceId":15,"name":"industryPhy","type":"String","paramDesc":"National Economic Industry Code","value":"""""""""value":""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" ,"comment":"","parentId":311,"childrenParam":null},{"id":325,"serviceId":15,"name":"opFrom","type":"String","paramDesc":"Operation term is from YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":322,"serviceId":15,"name":"frName","type":"String","paramDesc":"Determined as the name of the representative, the enterprise is the legal representative, and the self-employed The person in charge is the last name","value":"","comment":"","parentId":311,"childrenParam":null},{"id":323,"serviceId":15,"name":"industryCo","type":"String","paramDesc":"Industry category code","value":"","comment":"","parentId":311,"childrenParam":null},{"id":320,"serviceId":15,"name":"entType","type":"String","paramDesc":"entent(institution) type Limited liability companies, etc.","value":","comment":"","parentId":311,"childrenParam":null},{"id":321,"serviceId":15,"name":"esDate","type":"String","paramDesc":"Opening date YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":332,"serviceId":15,"name":"revDate","type":"String","paramDesc":"hang Sales date YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":330,"serviceId":15,"name":"regNo","type":"String","paramDesc":"registration number","value":"","comment":"","parentId":311,"childrenParam":null},{"id":331,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"registration authority","v alaue":"","comment":"","parentId":311,"childrenParam":null},{"id":328,"serviceId":15,"name":"regCap","type":"String","paramDesc":"regcap unit: 10,000 yuan","value":"","comment":"","parentId":311,"childrenParam":null},{"id":329,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"currency RMB, US dollar, etc.","val ue":"","comment":"","parentId":311,"childrenParam":null},{"id":313,"serviceId":15,"name":"OPSCOANDFORM","type":"String","paramDesc":"Scope and method of operation (business)","value":"","comment":"","parentId":311,"childrenParam":null},{"id":315,"serviceId":15,"name":"ancheYear","type":"String","paramDesc":"Last annual inspection YYYY ","value":"","comment":"","parentId":311,"childrenParam":null},{"id":314,"serviceId":15,"name":"abuItem","type":"String","paramDesc":"licensed business project","value":"","comment":"","parentId":311,"childrenParam":null},{"id":317,"ser viceId":15,"name":"cbuItem","type":"String","paramDesc":"General business project","value":"","comment":"","parentId":311,"childrenParam":null},{"id":316,"serviceId":15,"name":"canDate","type":"String","paramDesc":"Logout date YYYY-MM-DD","val ue":"","comment":"","parentId":311,"childrenParam":null},{"id":319,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"operation status in operation, revocation, cancellation, other","value":"","comment":"","parentId":311,"childrenParam":null},{"id":318 ,"serviceId":15,"name":"dom","type":"String","paramDesc":"address","value":"","comment":"","parentId":311,"childrenParam":null}]}]},{"id":304,"serviceId":15,"name":"result","type":"String","paramDesc":"Verification result","value":"match| not_match| not_found","comment":"","parentId":302,"childrenParam":null},{"id":303,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"interface return status","value":"","comment":"","parentId":302,"childrenParam":null}]},{"id":306,"serviceId":1 5,"name":"api_status","type":"JsonObject","paramDesc":"return status code","value":"","comment":"","parentId":-1,"childrenParam":[{"id":307,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"interface return status","value":"","comment":"","parent Id":306,"childrenParam":null},{"id":309,"serviceId":15,"name":"description","type":"String","paramDesc":"return status description","value":"","comment":"","parentId":306,"childrenParam":null},{"id":308,"serviceId":15,"name":"code","type":"Strin g","paramDesc":"status code","value":"","comment":"","parentId":306,"childrenParam":null},{"id":310,"serviceId":15,"name":"serial_no","type":"String","paramDesc":"flow number","value":"","comment":"","parentId":306,"childrenParam":null}]}]';// api page output parameter description var APItoHTML_outParamFn = function(json){var html=''var mustArr = ['required','optional']var paramHtml = ''var data = $.parseJSON(json);console.log(data)// name: parameter English name// type: parameter type// paramDesc: parameter Chinese definition// value: parameter assignment description// comment: parameter other description// childrenParam: child parameter list console.log('----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- c=[]dataFormatFn2(data,flagI)// Statistics the number of subclasses// Each node adds the len attribute to count the sum of the child node and the child node function dataFormatFn2(data){for (var i = 0; i < data.length; i++) {bbb[i]=0bbb[i]=dataFormatFn(data[i],0,bbb[i],c )};// data to htmlparamHtml = jsontohtml(data,0);}function dataFormatFn(data,flagI,b,c){data.len = (data.childrenParam && data.childrenParam.length)||1// debugger// console.log(data)c = c||[]if(data.childrenParam){for (var i = 0; i < data.childrenParam.length; i++) {b++data.len += dataFormatFn(data.childrenParam[i], flagI+1,b ,c[i])};return data.len}else{return (data.childrenParam && data.childrenParam.length) ||0}}console.log(bbb)console.log(data)var flagI = 0// Execute to dataformataFn2 // paramHtml = jsontohtml(data,flagI);function jsontohtml(data,flagI,len){var paramHtml='';var nbspArr =['','<b>Ⅰ</b>','<b>Ⅱ</b>','<b>Ⅲ</b>','<b>Ⅵ</b>','<b>Ⅴ</b>','<b>Ⅵ</b>','<b>Ⅶ</b>','<b>Ⅷ</b>','<b>Ⅸ</b>','<b>Ⅹ</b>']for(var i=0;i<data.length;i++){var str2 = ''var span = 1if( i==0 && flagI>0 && len>1){span = (10-flagI)str2 = '<td rowspan="'+ (len) +'"></td>'}else{span = (10-flagI)}paramHtml += '<tr>/'+ str2 +'/<td colspan="'+ span +'"><nobr>'+ nbspArr[flagI] + data[i].name +'</nobr></td>/<td>'+ data[i].type +'</td>/<td>'+ data[i].paramDesc +'</td>/<td>'+ data[i].value +'</td>/<td>'+ data[i].comment +'</td>/</tr>'if(data[i].childrenParam){paramHtml += jsontohtml(data[i].childrenParam,flagI+1,data[i].len)}else{flagI}}return paramHtml}console.log('---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- colspan="10"><nobr>Parameter English name</nobr></th>/<th><nobr>Parameter type</nobr></th>/<th><nobr>Chinese definition</nobr></th>/<th><nobr>Parameter assignment description</nobr></th>/<th><nobr>Other instructions</nobr></th>/</tt>/</t>/</thead>/<tbody>/'+ paramHtml +'/</tbody>/</table>/</div>/</dd>'$('#outParam dl').html(html);}APItoHTML_outParamFn(json)</script></body></html>