小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 ...
随机推荐
- 记一次使用python的selenium库爬取动态页面内容的经历
安装与配置selenium 安装selenium库 pip install selenium 配置浏览器驱动(本次使用Google Chrome) 打开Chrome,在浏览器的地址栏,输入chrome ...
- C++使用gnuplot-cpp库绘制图像
最近想要对一些时变的变量进行可视化,搜索来搜索去选择了使用gnuplot这个工具. sudo apt-get install gnuplot sudo apt-get install gnuplot- ...
- C# 常用类和命名空间
Array类 用括号声明数组是C#中使用Array类的记号.在后台使用C#语法,会创建一个派生于抽象基类Array的新类.这样,就可以使用Array类为每个C#数组定义的方法和属性了. Array类实 ...
- Go 使用 Cobra 构建 CLI 程序
使用 cobra-cli 搭建手脚架 # 安装 cobra-cli go install github.com/spf13/cobra-cli@latest # 创建一个应用 mkdir myapp ...
- 这才是 PHP 高性能框架 Workerman 的立命之本
大家好,我是码农先森. 在这个大家都崇尚高性能的时代,程序员的谈笑间句句都离不开高性能,仿佛嘴角边不挂着「高性能」三个字都会显得自己很 Low,其中众所皆知的 Nginx 就是高性能的代表.有些朋友可 ...
- Java8 Stream流使用
Java8 Stream 流式编程 一．Lambda表达式 Lambda表达式也可以称为闭包,它是推动Java8发布的最重要新特性,lambda允许把函数作为一个方法参数传递给方法. 在Java8之前 ...
- 从C++看C#托管内存与非托管内存
进程的内存 一个exe文件,在没有运行时,其磁盘存储空间格式为函数代码段+全局变量段.加载为内存后,其进程内存模式增加为函数代码段+全局变量段+函数调用栈+堆区.我们重点讨论堆区. 进程内存 函数代码 ...
- a-from提交时遇到errorFields:[]验证错误(vue3)
应用场景:使用a-form组件,里面使用a-select组件:当a-select组件内的值发生改变时,调用a-form的验证表单,进而提交. 问题:提交时遇到errorFields:[]验证错误 解决 ...
- 【FastDFS】05 Java程序测试上传
创建普通Maven工程 导入所需依赖坐标: <dependencies> <!-- https://mvnrepository.com/artifact/net.oschina.zc ...
- 小样本学习（Few shot learning）标准数据集（miniImageNet、tieredImageNet、Fewshot-CIFAR100）下载地址
以下数据集均不可商用: https://mtl.yyliu.net/download/ Please note that the splits for miniImageNet follow Ravi ...