CSS控制XML与通过js解析xml然后通过html显示xml中的数据
时间：2014-05-07 17:04:59
收藏：0
阅读：531
使用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>
评论（0）