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>