小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 ...
随机推荐
- Java-用户登录验证案例
用户登录验证 1.案例需求: 1.访问带有验证码的登录页面login.jsp 2.用户输入用户名,密码以及验证码 * 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误 * 如果验证码输入 ...
- Vue 3 后端错误消息处理范例
1. 错误消息格式 前后端消息传递时,我们可以通过 json 的 errors 字段传递错误信息,一个比较好的格式范例为: { errors: { global: ["网络错误"] ...
- Django DRF @action 装饰器
@action 装饰器在Django REST Framework (DRF) 中非常有用,它可以帮助你在ViewSet中创建自定义的动作,而不仅仅是依赖标准的CRUD操作(Create, Read, ...
- oeasy教您玩转vim - 27 - 文件类型
文件类型 回忆上节课内容 上次了解了缩进的各种方式 正常模式下用 << 缩进 插入模式下用 tab 缩进 显示缩进情况 :set listchars=eol:$,tab:>-,s ...
- .NET Core 3.x 基于Autofac的AOP缓存
一.依赖包 二.定义一个简单的缓存接口 /// <summary> /// 简单的缓存接口,只有查询和添加,以后会进行扩展 /// </summary> public inte ...
- h5py文件写入之——flush和update
技术背景 在前面的一篇博客中,我们介绍过使用VMD可视化H5MD标准化格式的轨迹文件的方法.H5MD本质上就是一个有规范格式的hdf5二进制文件,本文主要介绍两个关于hdf5的内容更新操作. 写入和更 ...
- adb对安卓app进行抓包（ip连接设备）
adb对安卓app进行抓包(ip连接设备) 一,首先将安卓设备的开发者模式打开,提示允许adb调试 二,自己的笔记本要和安卓设备在同一个网段下(同连一个WiFi就可以了) 三,在笔记本上根据ip来连接 ...
- Jmeter函数助手23-intSum
intSum函数可用于计算两个或多个整数值的和. 要添加的第一个整数:必填,填入整数,不能为小数 要添加的第二个整数:必填,填入整数,不能为小数 存储结果的变量名(可选) 1. intSum函数求多个 ...
- 不止于面向对象的SOLID原则
SOLID原则是由人称"鲍勃大叔"的Rober C. Martin所提出来的.他用五个面向对象设计原则的首字母组成了SOLID,并使其得到了广泛传播.这五个原则罗列如下: 单一指责 ...
- 对比python学julia（第一章）--（第四节）冰雹猜想
4.1 依葫芦画瓢 冰雹猜想是一种非常有趣的数字黑洞,曾让无数的数学爱好者为之痴迷.它有一个非常简单的变换规则,具体来说就是:任意取一个正整数n,如果n是偶数,就把n变成n/2;如果n是奇数,就把n变 ...