小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>
小tips：xml文件转为html表格展示示例的更多相关文章
- 将xml文件转为c#对像
读取xml文件数据,通过序列化反序列化转为List<T>对象后,对对象进行操作.
- 将 xml 文件 转为 DataTable
private static DataTable CreateDataTable(string table) { DataSet dataSet = new DataSet(); string dat ...
- 将xml文件转为txt文件
import os import re import sys import glob import xml.etree.ElementTree as ET def xml_to_txt(indir,o ...
- 【U1结业机试题】新闻内容管理系统：解析XML文件读取Html模版生成网页文件
一.作业要求: 1.在xml文件中创建新闻节点news,包含标题.作者.日期.正文等信息 2.创建HTML模板文件 3.读取xml中所有新闻信息,并使用新闻信息替换模板文件中占位符,从而为每一条新闻生 ...
- Java中使用DOM4J来生成xml文件和解析xml文件
一.前言 现在有不少需求,是需要我们解析xml文件中的数据,然后导入到数据库中,当然解析xml文件也有好多种方法,小编觉得还是DOM4J用的最多最广泛也最好理解的吧.小编也是最近需求里遇到了,就来整理 ...
- 解析XML文件之使用SAM解析器
XML是一种常见的传输数据方式,所以在开发中,我们会遇到对XML文件进行解析的时候,本篇主要介绍使用SAM解析器,对XML文件进行解析. SAX解析器的长处是显而易见的.那就是SAX并不须要将全部的文 ...
- 【Android】使用Pull生成/解析XML文件
一.生成XML文件,即是将对象集合转为XML文件存储. 对象集合 –> XML(序列化) Android中使用android.util.Xml类对其进行了描述,提供相应的API. 步骤大致如下: ...
- Java&Xml教程（二）使用DOM方式解析XML文件
DOM XML 解析方式是最容易理解的,它將XML文件作为Document对象读取到内存中,然后你可以轻松地遍历不同的元素和节点对象.遍历元素和节点不需要按照顺序进行. DOM解析方式适合尺寸较小的X ...
- springmvc 项目完整示例07 设置配置整合springmvc springmvc所需jar包springmvc web.xml文件配置
前面主要是后台代码,spring以及mybatis的整合 下面主要是springmvc用来处理请求转发,展现层的处理 之前所有做到的,完成了后台,业务层和持久层的开发完成了 接下来就是展现层了 有很多 ...
- IE下JS读取xml文件示例代码
JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助使用javascript脚本读取xml文件,这里暂只考虑IE浏览器st ...
随机推荐
- 如何巧妙使用some函数来优化性能
什么时候会用的array.some? 需要从数组里快速找到符合条件的某一项 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测. 如果没有满足条件的元素,则返回false ...
- P1387
#include<iostream> #include<utility> using namespace std; typedef long long ll; #define ...
- oeasy 教您玩转linux 之010208 满屏乱码 bb
我们来回顾一下 上一部分我们都讲了什么? 黑客帝国 各种速度颜色参数 最后我们想找一个让人完全崩溃的软件包,这不就来了,话不多说,先试试. apt show bbapt search bbsudo a ...
- 题解：CF1971C Clock and Strings
题解:CF1971C Clock and Strings 题意 在上图的一个圆中,给予你四个点 \(a,b,c,d\),判断线段 \(ab\) 与线段 \(cd\) 是否相交. 思路 先设置一个字符串 ...
- 一文全解：LVM（逻辑卷管理器）
前两篇文章已经讲了关于磁盘分区和磁盘阵列的相关内容: 一文全懂:Linux磁盘分区 一文全懂:独立冗余磁盘阵列(RAID) 但是磁盘分区完后再想扩容或者缩容就比较麻烦了,甚至很多时候不能扩容或者缩容, ...
- 【Python】GUI开发笔记
一.环境搭建: 1.Pycharm开发工具 pycharm历史版本 https://www.jetbrains.com/pycharm/download/other.html 破解插件 https:/ ...
- 【Vue】接口模块化处理
在前端Vue项目中,接口会被统一放在一个目录中管理: 一个模块的所有接口放在一个JS文件中: 文件会导入封装好的请求方法,和动态绑定的接口地址 import request from '@/utils ...
- 【Java】逻辑错误BUG
开局一张图来解释就够了 查询 COUNT() 结果数,有且仅有一条记录 好死不死判断查询的结果数量等等于0, 这不永远都是取TRUE返回 花了一个下午的时间就为了解决这个BUG
- 【Hibernate】Re04 JPA规范使用
都忘了前面一些小前提,就是数据库需要是存在的,不过写链接参数都会写上的 JPA实现就是和Hibernate类似,也需要对应的配置文件等等... 1.配置文件必须命名[persistence.xml]且 ...
- 国产AI训练卡，对标美国NVIDIA公司的A100，华为昇腾Atlas 300T A2（Ascend 910B4）高性能GPU/NPU/AI推理/国产计算/信创训练卡 —— 电商平台已开售
China has successfully achieved the localization of AI chips, breaking through the technological res ...