CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示
book.css
bookname{ display:block;color:Red}
author{ display:block;font-style:italic}
price{ display:block;colo
book.xml
<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet type="text/css" href="book.css" ?>
<bookstore>
<book>
<bookname>java与模式</bookname>
<author>白艳</author>
<price>12</price>
</book>
</bookstore> 数据库信息.xml
<?xml version="1.0" encoding="gb2312" ?>
<file>
<config id="01">
<url>jdbc:oracle:@thin:lacol:1521:finey</url>
<user>fineydb</user>
<password>123456</password>
</config>
<config id="02">
<url>jdbc:oracle:@thin:lacol:1521:fairy</url>
<user>fairydb</user>
<password>1314520</password>
</config>
<config id="03">
<url>jdbc:mysql:@thin:lacol:1521:lily</url>
<user>lilydb</user>
<password>123456</password>
</config>
<config id="04">
<url>jdbc:sqlserver:@thin:lacol:1521:joho</url>
<user>Johodb</user>
<password>123456</password>
</config>
</file> 通过js解析xml然后通过html显示xml中的数据
源XML文档scoot.xml
<?xml version="1.0" encoding="gb2312"?>
<scott>
<data id="0">
<employnum>7369</employnum>
<name>SMITH</name>
<job>CLERK</job>
<mgr>7902</mgr>
<hiredate>1980-12-17 00:00:00.0</hiredate>
<sal>800</sal>
<comm />
<depno>20</depno>
</data>
<data id="1">
<employnum>7499</employnum>
<name>ALLEN</name>
<job>SALESMAN</job>
<mgr>7698</mgr>
<hiredate>1981-02-20 00:00:00.0</hiredate>
<sal>1600</sal>
<comm>300</comm>
<depno>30</depno>
</data>
<data id="2">
<employnum>7521</employnum>
<name>WARD</name>
<job>SALESMAN</job>
<mgr>7698</mgr>
<hiredate>1981-02-22 00:00:00.0</hiredate>
<sal>1250</sal>
<comm>500</comm>
<depno>30</depno>
</data>
<data id="3">
<employnum>7566</employnum>
<name>JONES</name>
<job>MANAGER</job>
<mgr>7839</mgr>
<hiredate>1981-04-02 00:00:00.0</hiredate>
<sal>2975</sal>
<comm />
<depno>20</depno>
</data>
<data id="4">
<employnum>7654</employnum>
<name>MARTIN</name>
<job>SALESMAN</job>
<mgr>7698</mgr>
<hiredate>1981-09-28 00:00:00.0</hiredate>
<sal>1250</sal>
<comm>1400</comm>
<depno>30</depno>
</data>
<data id="5">
<employnum>7698</employnum>
<name>BLAKE</name>
<job>MANAGER</job>
<mgr>7839</mgr>
<hiredate>1981-05-01 00:00:00.0</hiredate>
<sal>2850</sal>
<comm />
<depno>30</depno>
</data>
<data id="6">
<employnum>7782</employnum>
<name>CLARK</name>
<job>MANAGER</job>
<mgr>7839</mgr>
<hiredate>1981-06-09 00:00:00.0</hiredate>
<sal>2450</sal>
<comm />
<depno>10</depno>
</data>
<data id="7">
<employnum>7788</employnum>
<name>SCOTT</name>
<job>ANALYST</job>
<mgr>7566</mgr>
<hiredate>1987-04-19 00:00:00.0</hiredate>
<sal>3000</sal>
<comm />
<depno>20</depno>
</data>
<data id="8">
<employnum>7839</employnum>
<name>KING</name>
<job>PRESIDENT</job>
<mgr />
<hiredate>1981-11-17 00:00:00.0</hiredate>
<sal>5000</sal>
<comm />
<depno>10</depno>
</data>
<data id="9">
<employnum>7844</employnum>
<name>TURNER</name>
<job>SALESMAN</job>
<mgr>7698</mgr>
<hiredate>1981-09-08 00:00:00.0</hiredate>
<sal>1500</sal>
<comm>0</comm>
<depno>30</depno>
</data>
<data id="10">
<employnum>7876</employnum>
<name>ADAMS</name>
<job>CLERK</job>
<mgr>7788</mgr>
<hiredate>1987-05-23 00:00:00.0</hiredate>
<sal>1100</sal>
<comm />
<depno>20</depno>
</data>
<data id="11">
<employnum>7900</employnum>
<name>JAMES</name>
<job>CLERK</job>
<mgr>7698</mgr>
<hiredate>1981-12-03 00:00:00.0</hiredate>
<sal>950</sal>
<comm />
<depno>30</depno>
</data>
<data id="12">
<employnum>7902</employnum>
<name>FORD</name>
<job>ANALYST</job>
<mgr>7566</mgr>
<hiredate>1981-12-03 00:00:00.0</hiredate>
<sal>3000</sal>
<comm />
<depno>20</depno>
</data>
<data id="13">
<employnum>7934</employnum>
<name>MILLER</name>
<job>CLERK</job>
<mgr>7782</mgr>
<hiredate>1982-01-23 00:00:00.0</hiredate>
<sal>1300</sal>
<comm />
<depno>10</depno>
</data>
</scott> 负责解析的HTML文件，里面是用JS解析的:
<html>
<head>
<title></title>
<xml id="data" src=\'#\'" />
<script language="javascript" type="text/javascript"> //以下的函数只用于在触发“导入所有数据”表单事件时
function getDataFromXml() {
// 1： 创建XML解析器
var parse = new ActiveXObject("Microsoft.XMLDOM"); //支持IE
// alert(parse);
//document.implementation //2：加载XML文档
parse.load("scoot.xml"); //parse.loadXML( x );//加载字符串
//alert( parse );
//是否加载成功 parseError.errorCode :0 加载成功 非0加载失败 if (parse.parseError.errorCode != 0) {//加载失败
alert("加载失败");
} else {
alert("加载成功");
parseX(parse);
} } //parse
function parseX(parse) {
alert("开始解析!"); //得到文档中table标签的对象
var myTable = document.getElementById("table");
//创建标签为tbody的对象
var tbody = document.createElement("tbody");
//获取根节点
var root = parse.documentElement;
// alert( root );
//alert( root.childNodes.length );
//循环输出书籍的信息
for (i = 0; i < root.childNodes.length; i++) {
//获属性值
var tr = document.createElement("tr");
var td = document.createElement("td");
//root.childNodes[i].attributes[0].text;表示根结点root的第i个子元素的第1个属性的值
td.innerHTML = root.childNodes[i].attributes[0].text;//得到是data中的id属性
tr.appendChild(td);
//获取book中的子节点内容
for (j = 0; j < root.childNodes[i].childNodes.length; j++) {//root.childNodes[i].childNodes.length表示data中包含的子元素的长度
var td = document.createElement("td");
//root.childNodes[i].childNodes[j].text;表示根结点root的第i个子元素它的第j个子元素的中的文本
td.innerHTML = root.childNodes[i].childNodes[j].text;
tr.appendChild(td);
}
//tbody
tbody.appendChild(tr);//每次新创建的一行数据tr，都加入其加入tbody标签中
}
myTable.appendChild(tbody);//最后将tbody标签加入mytable对象对应的标签中
document.getElementById("btn").disabled = true;//用于将btn对应的标签设为不可用,默认是为false的，也就是不可用是假的（即可用）
} </script>
</head>
<body>
<center>
<table border="1">
<caption>
号工信息</caption>
<tr>
<td>
员工编号
</td>
<td>
<!--datasrc表示数据源，datafld表示datasrc指定的数据源的字段-->
<input readonly datasrc=\'#\'" datafld="employnum" />
</td>
</tr>
<tr>
<td>
员工姓名
</td>
<td>
<input readonly datasrc=\'#\'" datafld="name" />
</td>
</tr>
<tr>
<td>
员工工作
</td>
<td>
<input readonly datasrc=\'#\'" datafld="job" />
</td>
</tr>
<tr>
<td>
员工MGR
</td>
<td>
<input readonly datasrc=\'#\'" datafld="mgr" />
</td>
</tr>
<tr>
<td>
员工雇期
</td>
<td>
<input readonly datasrc=\'#\'" datafld="hiredate" />
</td>
</tr>
<tr>
<td>
员工薪水
</td>
<td>
<input readonly datasrc=\'#\'" datafld="sal" />
</td>
</tr>
<tr>
<td>
员工comm
</td>
<td>
<input readonly datasrc=\'#\'" datafld="comm" />
</td>
</tr>
<tr>
<td>
员工depno
</td>
<td>
<input readonly datasrc=\'#\'" datafld="depno" />
</td>
</tr>
<tr>
<td>
操作
</td>
<td>
<input type="button" value="第一条" onclick="data.recordset.moveFirst()" />
<input type="button" value="上一条" onclick="data.recordset.movePrevious()" />
<input type="button" value="下一条" onclick="data.recordset.moveNext()" />
<input type="button" value="最后一条" onclick="data.recordset.moveLast()" />
</td>
</tr>
</table>
<hr color="blue" size="2" />
<h1>
数据库中的SCott表数据</h1>
<form name="form">
<table id="table" border="1">
<tr>
<td colspan="8">
<button id="btn" onclick="getDataFromXml()">
导入所有数据</button>
</td>
</tr>
<th>
员工编号
</th>
<th>
员工姓名
</th>
<th>
员工工作
</th>
<th>
员工MGR
</th>
<th>
员工雇期
</th>
<th>
员工薪水
</th>
<th>
员工comm
</th>
<th>
员工Depno
</th>
</table>
</form>
</center>
</body>
</html>
CSS控制XML与通过js解析xml然后通过html显示xml中的数据的更多相关文章
- JS解析DataSet.GetXML()方法产生的xml
在实际的项目制作过程中,经常要采用ajax方式来进行,当然,这就免不了要进行数据交换.如果采用拼接字符串的方式来进行,不仅拼接的时候麻烦,而且在拆解的时候更加麻烦,一旦遇到特殊字符,那么就是灾难了.因 ...
- js穿梭框；将两个table中的数据选中移动
将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...
- 2.3 使用 dom4j 对 xml文件进行 dom 解析
// 使用dom4j对XML文档进行解析 CRUD public class Demo1 { //读取XML文档中第二本书的书名 <书名>javaWEB</书名> @Test ...
- python_way day15 HTML-DAY2、 回顾HTML-CSS 标签（css强制生效），JS（数据类型，时间处理，作用域）
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效 解决缩小页面混乱 ...
- JS解析XML文件和XML字符串
JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...
- js解析xml,获取XMl标签属性值
<script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...
- js 解析XML 在Edge浏览器下面 无法准确读到节点属性值
js 解析XML 在Edge浏览器下面 无法准确读到节点属性值 Dom.documentElement.childNodes[j].attributes[2] 这个是大众写法 在win10的edge ...
- node.js 解析xml BOM问题（xmlreader sax.js）
Email:longsu2010 at yeah dot net 之前写了两篇文章关于node.js解析xml,说的是xmlreader,文章如下 node.js解析xml(xmlreader) no ...
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
随机推荐
- 为什么要加 -moz- -webkit- -ms- -o- ?
没有别的,为了兼容早期版本,为了解决CSS3标准正式发布以前的遗留问题.
- @synthesize vs. @dynamic
@synthesize will generate getter and setter methods and corresponding instance variable for your pro ...
- Dynamics AX 2012 R2 安装额外的AOS
众所周知,AX系统分为三层:Client,Application Server,Database Server. 我们添加额外的Application Server主要是出于以下两个原因: 使用多台服 ...
- 33、mybatis（二）
第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...
- QT开发编译问题备忘
编译<Qt及Qt Quick开发实战精解> 的代码,编译出错,提示: Cannot find file: E:\学习资料\QT\<Qt及Qt Quick开发实战精解>代码\sr ...
- Script 语言的简单练习题 乘法口诀
<script>for(var i=1;i<=9;i++){ for(var k=1;k<=i;k++) { document.write(k+"x"+i+ ...
- 如何通过iframe以post方式提交form表单
以前用过一次这种技术,这次用居然忘了,现纪录下来,下次再用就来看看. 首先在html中需要准备好form和iframe元素代码如下: <form id="speaker_form&qu ...
- 灵活QinQ配置
华为交换机灵活QinQ配置列子 配置vlan2 为内层vlan vlan100 为外层vlan #用户端 Gi // qinq vlan-translation enable port hybrid ...
- tar等
tar格式,会打包成一个文件,可以对多个目录,或者多个文件进行打包tar命令只是打包,不会压缩,打包前后大小是一样的 tar命令 -c //打包-x //解压-f //指定文件-t //查看 tar ...
- BW常用事务码Tcode
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...