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>
CSS控制XML与通过js解析xml然后通过html显示xml中的数据的更多相关文章
- JS解析DataSet.GetXML()方法产生的xml
在实际的项目制作过程中,经常要采用ajax方式来进行,当然,这就免不了要进行数据交换.如果采用拼接字符串的方式来进行,不仅拼接的时候麻烦,而且在拆解的时候更加麻烦,一旦遇到特殊字符,那么就是灾难了.因 ...
- js穿梭框；将两个table中的数据选中移动
将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...
- 2.3 使用 dom4j 对 xml文件进行 dom 解析
// 使用dom4j对XML文档进行解析 CRUD public class Demo1 { //读取XML文档中第二本书的书名 <书名>javaWEB</书名> @Test ...
- python_way day15 HTML-DAY2、 回顾HTML-CSS 标签（css强制生效），JS（数据类型，时间处理，作用域）
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效 解决缩小页面混乱 ...
- JS解析XML文件和XML字符串
JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...
- js解析xml,获取XMl标签属性值
<script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...
- js 解析XML 在Edge浏览器下面 无法准确读到节点属性值
js 解析XML 在Edge浏览器下面 无法准确读到节点属性值 Dom.documentElement.childNodes[j].attributes[2] 这个是大众写法 在win10的edge ...
- node.js 解析xml BOM问题（xmlreader sax.js）
Email:longsu2010 at yeah dot net 之前写了两篇文章关于node.js解析xml,说的是xmlreader,文章如下 node.js解析xml(xmlreader) no ...
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
随机推荐
- XAF去掉View页面的编辑器
如图,去掉该编辑器功能. 1.detailView protected override void OnActivated() { base.OnActivat ...
- 自定义view
这两篇文章不可错过,是最靠谱的基础文献.总的来说,如果想完全定制,就继承与于View类:如果只是在原有控件基础上拓展,那就继承TextView.Button或者LinearLayout等.接下来,就以 ...
- TypeError: unsupported operand type(s) for |: 'str' and 'str'
问题描述:
- Make div 100% height of browser window/设置div等于浏览器的高度
Viewport-Percentage (or Viewport-Relative) Lengths Viewport-Percentage Lengths: The viewport-percent ...
- Dynamics AX 2012 R2 在AIF服务契约中使用DateTime
Reinhard在AIF中使用DateTime作为服务契约的参数,与DotNet程序进行交互时,总是因为时区的问题,导致DotNet提交的System.DateTime与AIF中接收的DateTime ...
- WIFI驱动的移植 realtek 8188
一般我们拿到的android源代码中wifi应用层部分是好的, 主要是wifi芯片的驱动要移植并添加进去. wifi驱动的移植, 以realtek的8188etv为例到官网下载相应的驱动, 解压后可以 ...
- 2016年12月20日 星期二 --出埃及记 Exodus 21:15
2016年12月20日 星期二 --出埃及记 Exodus 21:15 "Anyone who attacks his father or his mother must be put to ...
- jQuery 添加元素
jQuery 添加元素 1.append 在被选元素的结尾插入内容 $(document).ready(function(){ $("button").click(function ...
- 大分享-hibernate,springmvc,easyui简要介绍
近期公司一直在做项目,主要用到了springMVC,eseayui,hibernate几大框架.近一个月的时间,个人就目前自我知识给予分享. 很多公司使用mybatis产品,综合所述其最大优点是全SQ ...
- linux(centos )mongodb install
file down :http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz /usr/local/ tar zxvf mongo ...