CSS控制XML与通过js解析xml然后通过html显示xml中的数据

时间：2023-11-14 14:01:14
使用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>

相关文章