CSS控制XML與經過js解析xml而後經過html顯示xml中的數據

時間 2019-11-12
標籤 css 控制 xml 經過解析而後 html 顯示數據欄目 CSS 简体版
原文原文鏈接
使用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>