小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 ...
随机推荐
- oeasy教您玩转vim - 84 - # 命令command
命令 command 回忆 关于 函数function 可以调用别的函数 :call append(0,"oeasy o2z o3z") 还可以执行表达式 :call exec ...
- FFmpeg开发笔记（三十九）给Visual Studio的C++工程集成FFmpeg
<FFmpeg开发实战:从零基础到短视频上线>一书的"第11章 FFmpeg的桌面开发"介绍了如何在Windows环境对Qt结合FFmpeg实现桌面程序,那么Win ...
- Vue 基于vue-codemirror实现的代码编辑器
基于vue-codemirror实现的代码编辑器 开发环境 jshint 2.11.1 jsonlint 1.6.3 script-loader 0.7.2 vue 2.6.11 vue-codemi ...
- STL 算法 <algorithm>,
STL 算法部分主要由头文件 <algorithm>,<numeric>,<functional > 组成.要使用 STL 中的算法函数必须包含头文件 < a ...
- Activity的创建
Activity的创建: 1.layout内写入相关代码 此处为显示的页面 2.Java内创建相关类写入代码 3.在清单内写入 快捷方法:直接完成上面步骤 layout: match_parent// ...
- SSL/TLS 深入浅出
SSL,https(HTTP over SSL), X.509, SSL 证书 ,证书申请 /导入/签发, 等名词,想必有一定工作经验的小伙伴,一定都会略有耳闻,或者至少也听神边大神念叨过.虽然司空见 ...
- 一个疑问：foundation models , 现在已经有了视觉的大模型也有了语言大模型，那么什么时候会有强化学习大模型，更准确的说什么时候会有强化学习的基础模型（foundation models）
一个疑问:foundation models , 现在已经有了视觉的大模型也有了语言大模型,那么什么时候会有强化学习大模型,更准确的说什么时候会有强化学习的基础模型(foundation models ...
- Jax框架 —— 如何在没有GPU和TPU的设备上debug代码 —— 在CPU上使用GPU仿真设置 —— Jax框架在多卡设备上的自动并行特性的仿真体验
Jax计算框架是Google用来取代Tensorflow的新一代计算框架,这个框架使用类似pytorch的技术,但是在pytorch技术之上加入了更加强大的技术,但是这也导致该框架使用起来要比pyto ...
- A3C与GA3C的收敛性分析
G-A3C的代码: https://gitee.com/devilmaycry812839668/gpu_a3c 论文: <Reinforcement Learning thorugh Asyn ...
- 设计和实现AI算法算法时有没有必要在代码中加注释，没有用必要在实现之前弄个UML图？？？
问题如题: 设计和实现AI算法算法时有没有必要在代码中加注释,没有用必要在实现之前弄个UML图??? 今天看到一个博文: https://www.cnblogs.com/siyuanwai/p/154 ...