小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 >&lt;</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>

 

posted @ 2020-11-20 09:01  风雨后见彩虹  阅读(196)  评论(0编辑  收藏  举报