小tips：xml檔案轉為html表格展示示例
阿新 • • 發佈：2020-11-20
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>