小tips：xml文件转为html表格展示示例
books.xml文件格式如下：
<?xml version="1.0" encoding="UTF-8"?> <xbrl xmlns="http://www.xbrl.org/2003/instance" xmlns:cfid-common="http://eid.csrc.gov.cn/cn/fid/rpt/common/2007-09-01" xmlns:cfid-fgi="http://eid.csrc.gov.cn/cn/fid/rpt/fgi/2007-09-01" xmlns:cfid-gcd="http://eid.csrc.gov.cn/cn/fid/rpt/gcd/2007-09-01" xmlns:cfid-ie="http://eid.csrc.gov.cn/cn/fid/rpt/ie/2007-09-01" xmlns:cfid-mr="http://eid.csrc.gov.cn/cn/fid/rpt/mr/2007-09-01" xmlns:cfid-pt="http://eid.csrc.gov.cn/cn/fid/common/pt/2007-09-01" xmlns:iso4217="http://www.xbrl.org/2003/iso4217" xmlns:link="http://www.xbrl.org/2003/linkbase" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://eid.csrc.gov.cn/cn/fid/fi/pir/2007-09-01 http://eid.csrc.gov.cn/cn/fid/fi/pir/2007-09-01/cfid-fi-pir-2007-09-01.xsd"> <cfid-gcd:GongGaoFaBuRiQi >2019-06-10</cfid-gcd:GongGaoFaBuRiQi> <cfid-pt:YiWaiBiJiJiaDeZiChanMingXi> <cfid-pt:money>人民币</cfid-pt:money> </cfid-pt:YiWaiBiJiJiaDeZiChanMingXi> <cfid-mr:JiJinJiLiHuoJiJinJinLiXiaoZuJianJie> <cfid-mr:JJJLHJJJLXZXingMing >张三</cfid-mr:JJJLHJJJLXZXingMing> <cfid-mr:JJJLHJJJLXZRenZhiRiQi >2014-04-21</cfid-mr:JJJLHJJJLXZRenZhiRiQi> </cfid-mr:JiJinJiLiHuoJiJinJinLiXiaoZuJianJie> <cfid-fgi:TouZiMuBiao >在深入的基本面研究的基础上，精选股价相对于内在价值明显低估的股票进行投资，注重安全边际，为基金份额持有人实现长期稳定的回报。</cfid-fgi:TouZiMuBiao> <cfid-fgi:FengXianShouYiTeZheng >本基金为股票型基金，其预期收益水平和预期风险水平高于债券型基金、混合型基金和货币型基金，属于预期风险水平和预期收益水平较高的投资品种。</cfid-fgi:FengXianShouYiTeZheng> <cfid-ie:RenGouFeiRenGouFenEQingKuangShuoMing> <cfid-ie:RenGouFenEShangXian>1000000.00</cfid-ie:RenGouFenEShangXian> <cfid-ie:RenGouFenEShangXianFuHao ><</cfid-ie:RenGouFenEShangXianFuHao> <cfid-ie:RenGouFenEXiaXian>0.00</cfid-ie:RenGouFenEXiaXian> <cfid-ie:RenGouFenEXiaXianFuHao >≤</cfid-ie:RenGouFenEXiaXianFuHao> <cfid-ie:RenGouFenEFeiLv >0.0120</cfid-ie:RenGouFenEFeiLv> <cfid-ie:RenGouFenEFeiLvDanWei >%</cfid-ie:RenGouFenEFeiLvDanWei> </cfid-ie:RenGouFeiRenGouFenEQingKuangShuoMing> <cfid-ie:JiJinGuanLiFeiDeShouFeiFangShi >管理费收费方式</cfid-ie:JiJinGuanLiFeiDeShouFeiFangShi> <cfid-ie:JiJinTuoGuanFeiDeNianFeiLv >0.0044</cfid-ie:JiJinTuoGuanFeiDeNianFeiLv> <cfid-ie:JiJinQiTaFeiYongMingXiDeQingKuangShuoMing> <cfid-ie:JiJinQiTaFeiYongMingXiDeFeiYongLeiBie >其他费用</cfid-ie:JiJinQiTaFeiYongMingXiDeFeiYongLeiBie> <cfid-ie:JiJinQiTaFeiYongMingXiDeNianFeiLv >0.0044</cfid-ie:JiJinQiTaFeiYongMingXiDeNianFeiLv> </cfid-ie:JiJinQiTaFeiYongMingXiDeQingKuangShuoMing> <cfid-ie:JiJinYunZuoXiangGuanFeiYongQingKuangBeiZhu ><![CDATA[基金运作相关费用情况备注]]></cfid-ie:JiJinYunZuoXiangGuanFeiYongQingKuangBeiZhu> </xbrl>
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> table { border-collapse:collapse; border: 1px solid #ccc; width: 1000px; margin: 10px auto; } td,th { padding: 10px 10px; border: 1px solid #ccc; text-align: justify; } th{ background-color: #000066; color:#fff; } </style> </head> <body> <script type="text/javascript"> function getChildrenArr(arr) { var result = []; arr.forEach(function(item) { if(item.nodeType == 1) { result.push({ children: [], name: item.tagName.split(':')[1], value: item.childNodes[0].nodeValue }) } }) return result; } if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","./books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var xbrlTag = xmlDoc.getElementsByTagName('xbrl'); var tagArr = [].slice.call(xbrlTag[0].childNodes); var resultArr = []; // 得到页面展示的数组 tagArr.forEach(function(item) { if(item.nodeType == 1 && item.tagName.toLowerCase().indexOf('cfid-') != -1) { // 元素节点并且包含cfid标签 if(item.childNodes.length > 1) { var childNodesArr = [].slice.call(item.childNodes).reduce(function(pre,cur) { if(cur.nodeType == 1) { pre.push(cur); } return pre; },[]); resultArr.push({ children: getChildrenArr(childNodesArr), name: item.tagName.split(':')[1], value: item.childNodes[0].nodeValue }) } else { resultArr.push({ children: [], name: item.tagName.split(':')[1], value: item.childNodes[0].nodeValue }) } } }) var htmlStr = '<table><tr><th>名称</th><th>内容</th></tr>'; for(var i = 0, len = resultArr.length; i < len; i++) { var curItem = resultArr[i]; if(!curItem.children.length) { console.log(curItem) htmlStr += `<tr class="item"> <td class="title"> ${curItem.name} </td> <td class="info">${curItem.value} </td> </tr>`; } else { htmlStr += `<tr class="item"> <td class="title">${curItem.name} </td> <td class="info">`; curItem.children.forEach(function(cur) { htmlStr += `<div class="child-item">${ cur.name}: ${cur.value} </div>`; },''); htmlStr += `</td></tr>`; } } htmlStr += '</table>' var ele = document.createElement('div'); ele.innerHTML = htmlStr; document.body.appendChild(ele); </script> </body> </html>
