使用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="scoot.xml" />
<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="#data" datafld="employnum" />
</td>
</tr>
<tr>
<td>
員工姓名
</td>
<td>
<input readonly datasrc="#data" datafld="name" />
</td>
</tr>
<tr>
<td>
員工工作
</td>
<td>
<input readonly datasrc="#data" datafld="job" />
</td>
</tr>
<tr>
<td>
員工MGR
</td>
<td>
<input readonly datasrc="#data" datafld="mgr" />
</td>
</tr>
<tr>
<td>
員工雇期
</td>
<td>
<input readonly datasrc="#data" datafld="hiredate" />
</td>
</tr>
<tr>
<td>
員工薪水
</td>
<td>
<input readonly datasrc="#data" datafld="sal" />
</td>
</tr>
<tr>
<td>
員工comm
</td>
<td>
<input readonly datasrc="#data" datafld="comm" />
</td>
</tr>
<tr>
<td>
員工depno
</td>
<td>
<input readonly datasrc="#data" 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>
