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与 ...
随机推荐
- mysql出现“SELECT list is not in GROUP BY clause and contains nonaggregated column [duplicate]”错误提示
项目跨平台时由于mysql设置的问题,原代码运行出现这个错误,此时把mysql设置改下就好了 sql_mode='NO_ENGINE_SUBSTITUTION'
- textarea 多行文本保存数据到DB，取出后恢复换行
Steps: 1.保存到数据库之前把textarea中的换行字符转换为<br>. var dbStr = textareaStr.replace(/\n|\r\n/g,"< ...
- SIP协议栈基础笔记
//------------------SIP基础------------------------// SIP是基于UDP的协议 UA(user Agent)用户代理 UAC(client)发起SIP ...
- asp.net 之 购物车
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Java 基础知识 问答
1,Java为什么能跨平台运行?请简述原理. 因为Java程序编译之后的代码不是能被硬件系统直接运行的代码,而是一种“中间码”——字节码.然后不同的硬件平台上安装有不同的Java虚拟机(JVM),由J ...
- Smallest Bounding Rectangle - uva10173
Smallest Bounding Rectangle Given the Cartesian coordinates of n(>0)2-dimensional points, write a ...
- pickle与shelve
pickle Example 写入文件 import pickle integers = [1, 2, 3, 4, 5] with open('pickle-example.p', 'wb') as ...
- CentOS的网络配置（终端环境）
在虚拟机中安装了Server版的CentOS,用于做Hadoop相关的实验.Server版的CentOS默认是没有桌面环境的,eth0的网络默认也没有开启,需要我们手动启动网络. 关键配置说明 网络和 ...
- 使用IE11抓包，防止在网页跳转时抓包数据被清除的方法
引:最近在研究使用python实现模拟登陆各大网站,在使用IE11进行抓包分析网站登陆的逻辑结构的时候,发现每次在抓包的时候,当网页跳转的时候,抓包数据会被清除,让我很是郁闷,最终在查阅相关资料以及自 ...
- iOS FMDB的使用
简介: SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK 很早就支持了 SQLite,在使用时,只需要加入 libsqlite ...