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="http://www.soscw.com/book.css" ?>
bookstore>
  book>
    bookname>java与模式bookname>
    author>白艳author>
    price>12price>
  book>
bookstore>
 
数据库信息.xml
xml version="1.0" encoding="gb2312" ?>
file>
 config id="01">
  url>jdbc:oracle:@thin:lacol:1521:fineyurl>
  user>fineydbuser>
  password>123456password>
 config>
 config id="02">
  url>jdbc:oracle:@thin:lacol:1521:fairyurl>
  user>fairydbuser>
  password>1314520password>
 config>
 config id="03">
  url>jdbc:mysql:@thin:lacol:1521:lilyurl>
  user>lilydbuser>
  password>123456password>
 config>
 config id="04">
  url>jdbc:sqlserver:@thin:lacol:1521:johourl>
  user>Johodbuser>
  password>123456password>
 config>
file>
 
 
通过js解析xml然后通过html显示xml中的数据
源XML文档scoot.xml
xml version="1.0" encoding="gb2312"?>
scott>
    data id="0">
        employnum>7369employnum>
        name>SMITHname>
        job>CLERKjob>
        mgr>7902mgr>
        hiredate>1980-12-17 00:00:00.0hiredate>
        sal>800sal>
        comm />
        depno>20depno>
    data>
    data id="1">
        employnum>7499employnum>
        name>ALLENname>
        job>SALESMANjob>
        mgr>7698mgr>
        hiredate>1981-02-20 00:00:00.0hiredate>
        sal>1600sal>
        comm>300comm>
        depno>30depno>
    data>
    data id="2">
        employnum>7521employnum>
        name>WARDname>
        job>SALESMANjob>
        mgr>7698mgr>
        hiredate>1981-02-22 00:00:00.0hiredate>
        sal>1250sal>
        comm>500comm>
        depno>30depno>
    data>
    data id="3">
        employnum>7566employnum>
        name>JONESname>
        job>MANAGERjob>
        mgr>7839mgr>
        hiredate>1981-04-02 00:00:00.0hiredate>
        sal>2975sal>
        comm />
        depno>20depno>
    data>
    data id="4">
        employnum>7654employnum>
        name>MARTINname>
        job>SALESMANjob>
        mgr>7698mgr>
        hiredate>1981-09-28 00:00:00.0hiredate>
        sal>1250sal>
        comm>1400comm>
        depno>30depno>
    data>
    data id="5">
        employnum>7698employnum>
        name>BLAKEname>
        job>MANAGERjob>
        mgr>7839mgr>
        hiredate>1981-05-01 00:00:00.0hiredate>
        sal>2850sal>
        comm />
        depno>30depno>
    data>
    data id="6">
        employnum>7782employnum>
        name>CLARKname>
        job>MANAGERjob>
        mgr>7839mgr>
        hiredate>1981-06-09 00:00:00.0hiredate>
        sal>2450sal>
        comm />
        depno>10depno>
    data>
    data id="7">
        employnum>7788employnum>
        name>SCOTTname>
        job>ANALYSTjob>
        mgr>7566mgr>
        hiredate>1987-04-19 00:00:00.0hiredate>
        sal>3000sal>
        comm />
        depno>20depno>
    data>
    data id="8">
        employnum>7839employnum>
        name>KINGname>
        job>PRESIDENTjob>
        mgr />
        hiredate>1981-11-17 00:00:00.0hiredate>
        sal>5000sal>
        comm />
        depno>10depno>
    data>
    data id="9">
        employnum>7844employnum>
        name>TURNERname>
        job>SALESMANjob>
        mgr>7698mgr>
        hiredate>1981-09-08 00:00:00.0hiredate>
        sal>1500sal>
        comm>0comm>
        depno>30depno>
    data>
    data id="10">
        employnum>7876employnum>
        name>ADAMSname>
        job>CLERKjob>
        mgr>7788mgr>
        hiredate>1987-05-23 00:00:00.0hiredate>
        sal>1100sal>
        comm />
        depno>20depno>
    data>
    data id="11">
        employnum>7900employnum>
        name>JAMESname>
        job>CLERKjob>
        mgr>7698mgr>
        hiredate>1981-12-03 00:00:00.0hiredate>
        sal>950sal>
        comm />
        depno>30depno>
    data>
    data id="12">
        employnum>7902employnum>
        name>FORDname>
        job>ANALYSTjob>
        mgr>7566mgr>
        hiredate>1981-12-03 00:00:00.0hiredate>
        sal>3000sal>
        comm />
        depno>20depno>
    data>
    data id="13">
        employnum>7934employnum>
        name>MILLERname>
        job>CLERKjob>
        mgr>7782mgr>
        hiredate>1982-01-23 00:00:00.0hiredate>
        sal>1300sal>
        comm />
        depno>10depno>
    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>
                
                    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>