使用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>