使用CSS控制XML的显示
book.css
bookname{ display:block;color:Red}
author{ display:block;font-style:italic} price{ display:block;colobook.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="第一条" οnclick="data.recordset.moveFirst()" /> <input type="button" value="上一条" οnclick="data.recordset.movePrevious()" /> <input type="button" value="下一条" οnclick="data.recordset.moveNext()" /> <input type="button" value="最后一条" οnclick="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" οnclick="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>