小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 ...
随机推荐
- CaiT：Facebook提出高性能深度ViT结构 | ICCV 2021
CaiT通过LayerScale层来保证深度ViT训练的稳定性,加上将特征学习和分类信息提取隔离的class-attention层达到了很不错的性能,值得看看 来源:晓飞的算法工程笔记 公众号 论文: ...
- 开源流式湖仓服务 Arctic 详解：并非另一套 Table Format
[点击了解更多知识] 本文根据作者于 Arctic 开源发布会演讲内容整理(略有删减),系统解读 Arctic 项目研发初衷.生态定位.核心特性.性能表现及未来规划. 首先感谢大家参与我们 Arcti ...
- 算法金 | 秒懂 AI - 深度学习五大模型：RNN、CNN、Transformer、BERT、GPT 简介
1. RNN(Recurrent Neural Network) 时间轴 1986年,RNN 模型首次由 David Rumelhart 等人提出,旨在处理序列数据. 关键技术 循环结构 序列处理 长 ...
- 02-springboot配置
目录 1,前言 2,YAML介绍 3,获取yml配置文件内容 4,springboot的配置文件 5,springboot使用@Value实现映射 6,@PropertySource.@ImportR ...
- npm私服 verdaccio 搭建
1.什么是npm 私服 我们前端(web,nodejs)平常使用的各种包,什么vue,react,react-router, zustand等,都会从 https://registry.npmjs.o ...
- Javascript 转Date对象为字符串实现函数
转Date对象为字符串实现函数 function formatDate(time, format = "Y-MM-dd HH:mm:ss") { /** 格式化字符说明 Y 年 四 ...
- java面试一日一题：讲下ThreadLocal
问题:请讲下ThreadLocal 分析:首先要了解ThreadLocal的基本原理:其次要理解ThreadLocal发生内存泄漏的原因:最后ThreadLocal是如何做到线程隔离的 回答要点: 主 ...
- 基于禅道数据库对bug进行不同维度统计
工作中经常需要在周报.月报.年报对禅道bug数据进行不同维度统计导出,以下是我常用的统计sql 1.统计2022年每个月bug数(deleted='0'是查询未删除的bug) select DATE_ ...
- Vue Hook 封装通用型表格
一.创建通用型表格的需求 实现一个通用型表格组件,具备以下功能: 动态列配置. 分页功能. 排序功能. 可扩展的行操作功能. 二.设计通用型表格组件 首先,需要设计一个基础的表格组件,它接受列配置.数 ...
- 【Java-GUI】01 AWT & 布局
https://www.bilibili.com/video/BV1Z54y1S7ns --1.AWT 完整描述:Abstract Window Toolkit 抽象窗口工具集 提供的API资源 抽象 ...