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与 ...
随机推荐
- (4) 深入理解Java Class文件格式(三)
转载:http://blog.csdn.net/zhangjg_blog/article/details/21557357 首先, 让我们回顾一下关于class文件格式的之前两篇博客的主要内容. 在 ...
- Mysql新知识点150928
1.select distinct(DATE_FORMAT(updatetime,'%Y-%m')) as updatetime from barcode where pid!=0 order by ...
- Oracle子查询（嵌套查询）
概念: 所谓子查询,即一个select语句中嵌套了另外的一个或者多个select语句 需求:查找和Smith同部门的所有员工的id和last_name 目标: 员工id,last_name from: ...
- 《BI项目笔记》SSAS部署时发生的问题——元数据管理器中存在错误 解决办法
在生成和部署期间出错.是否继续?解决办法: 用Microsoft SQL Server Management Studio 连接Analysis Services 然后删除多维数据库,重新布署.这样就 ...
- timer控件、三级联动
timer控件: 实现时间日期自增长: using System; using System.Collections.Generic; using System.ComponentModel; usi ...
- runtime运行机制方法学习
runtime这玩意第一次听说时都不知道是什么,经过了解后才知道它就是oc动态语言的机制,没有它那oc就不能称为动态语言.在之前可能大家对runtime了解都不深,随着编程技能的日益加深和需要,大家开 ...
- JQuery_进阶选择器
在简单选择器外,还有一些进阶的选择器方便我们更精准的选择元素. 1.群组选择器 可以将相同的样式合并 <script type="text/javascript" src=& ...
- iOS开发 沙盒路径和使用
1.模拟器沙盒目录文件都在个人用户名文件夹下的一个隐藏文件夹里,中文叫资源库,他的目录其实是Library.因为应用是在沙箱(sandbox)中的,在文件读写权限上受到限制,只能在几个目录下读写文件: ...
- Http-Only Cookie
设置Cookie的时候,如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送. S ...
- CMD规范（通用模块定义规范）（翻译）
最近在使用sea.js.大家知道sea.js遵循CMD规范.该规范的英文说明很简洁,我试着翻译了一下,旨在交流. Common Module Definition 通用模块定义规范 This spec ...