javascript xml xsl取值及数据修改
作者：
前几天公司要用xml快速方便的存取属性N多的数据,跟sinoly合作研究了一下.做了一个小例子.
1.example.xml--主要数据文件
<?xml version="1.0" encoding="UTF-8"?>
<?xml:stylesheet type="text/xsl" href="example.xsl"?>
<projects id="1">
<project title="一级标题1" index="1">
<items isTrunk="false" title="二级标题1.1" id="items_1">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
<remark></remark>
</items>
<items isTrunk="false" title="二级标题1.2" id="items_2">
<result type="2">3</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
</project>
<project title="一级标题2" index="2">
<items isTrunk="false" title="二级标题2.1" id="items_3">
<result type="3">3</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="true" title="二级标题2.2">
<item title="三级标题2.2.1" id="item_1">
<result type="1">2</result>
<officer><![CDATA[居然是乱码]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题2.2.2" id="item_2">
<result type="1">3</result>
<officer><![CDATA[<><>]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
<items isTrunk="true" title="二级标题2.3">
<item title="三级标题2.3.1" id="item_3">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题2.3.2" id="item_4">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
</project>
<project title="一级标题3" index="3">
<items isTrunk="false" title="二级标题3.1" id="items_4">
<result type="4" units="元">25345</result>
<officer><![CDATA[sinoly]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="false" title="二级标题3.2" id="items_5">
<result type="4" units="元">9865764</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="false" title="二级标题3.3" id="items_6">
<result type="2">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="true" title="二级标题3.4">
<item title="三级标题3.4.1" id="item_5">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题3.4.2" id="item_6">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题3.4.3" id="item_7">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
</project>
</projects>
2.example.xsl--样式文件,很方便的取到xml数据
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--根模板-->
<xsl:output method="xml"/>
<xsl:template match="/">
<xsl:apply-templates select="projects/project"/>
<h6>
<button type="submit" class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="提交"> 下一步</button>
</h6>
</xsl:template>
<!--主题模板-->
<xsl:template match="project">
<TABLE border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td colspan="5" align="center" class="tright">
<h2>
<xsl:number value="position()" format="一、"/><xsl:value-of select="@title"/>
</h2>
</td>
</tr>
<xsl:apply-templates select="items"/>
</TABLE>
<BR/>
</xsl:template>
<!--一级题干模板-->
<xsl:template match="items">
<tr>
<td colspan="2" class="tright">
<xsl:number value="position()" format="1."/><xsl:value-of select="@title"/>
</td>
<xsl:choose>
<xsl:when test="@isTrunk[.='false']">
<xsl:apply-templates select="result"/>
<xsl:apply-templates select="officer"/>
</xsl:when>
<xsl:otherwise>
<td colspan="3" class="tright" style="color:blue;font-weight:bolder">
注意以下几点
</td>
<xsl:apply-templates select="item"/>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:template>
<!--二级题干模板-->
<xsl:template match="item">
<tr>
<td class="tright" style="padding-left:20px" colspan="2">
<h4><xsl:number value="position()" format="(a)."/><xsl:value-of select="@title"/></h4>
</td>
<xsl:apply-templates select="result"/>
<xsl:apply-templates select="officer"/>
</tr>
</xsl:template>
<!--选择框模板-->
<xsl:template match="result">
<xsl:choose>
<xsl:when test="@type = '1'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<!--<select name="select">-->
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">符合</option>
<option value="2">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">符合</option>
<option value="2">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='2'">
<option value="0">请选择 </option>
<option value="1">符合</option>
<option value="2" selected="selected">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">符合</option>
<option value="2">基本符合</option>
<option value="3" selected="selected">不符合</option>
</xsl:when>
</xsl:choose>
<!--</select>-->
</xsl:element>
</td>
</xsl:when>
<xsl:when test="@type = '2'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">是</option>
<option value="2">否</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">是</option>
<option value="2">否</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">是</option>
<option value="2" selected="selected">否</option>
</xsl:when>
</xsl:choose>
</xsl:element>
</td>
</xsl:when>
<xsl:when test="@type = '3'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">有</option>
<option value="2">无</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">有</option>
<option value="2">无</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">有</option>
<option value="2" selected="selected">无</option>
</xsl:when>
</xsl:choose>
</xsl:element>
</td>
</xsl:when>
<xsl:otherwise>
<td width="15%">
<xsl:element name="textarea">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute><xsl:value-of select="."/>
</xsl:element>
<xsl:value-of select="@units"/>
</td>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<!--责任人模板-->
<xsl:template match="officer">
<td width="9%" class="tright">责任人</td>
<td width="11%">
<xsl:element name="textarea">
<xsl:attribute name="name">of_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:value-of select="."/>
</xsl:element>
</td>
</xsl:template>
</xsl:stylesheet>
3.index.html--用javascript导入数据并能修改xml里的数据.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<link rel="Stylesheet" type="text/css" href="focusform.css"/>
<script language="javascript" src="form.js"></script>
<script type="text/javascript" src="detect.js"></script>
<script type="text/javascript" src="xmldom.js"></script>
<script type="text/javascript">
//载入xml与xsl文件
var oxml = new XmlDom();
var oxsl = new XmlDom();
oxml.async = false;//同步载入
oxsl.async = false;
oxml.load("example.xml");
oxsl.load("example.xsl");
if (oxml.parseError != 0) {
var oError = oxml.parseError;
alert("An error occurred:\nError Code: "
+ oError.errorCode + "\n"
+ "Line: " + oError.line + "\n"
+ "Line Pos: " + oError.linepos + "\n"
+ "Reason: " + oError.reason);
}
if (oxsl.parseError != 0) {
var oError = oxsl.parseError;
alert("An error occurred:\nError Code: "
+ oError.errorCode + "\n"
+ "Line: " + oError.line + "\n"
+ "Line Pos: " + oError.linepos + "\n"
+ "Reason: " + oError.reason);
}
var sResult = oxml.transformNode(oxsl);
//alert(sResult);
//一些操作
function btnSub(){
var fes = document.forms[0].elements;
for(var i = 0;i<fes.length;i++){
var name = fes[i].name;
if(name.indexOf('re_')!=-1){
var xmlid=name.substring(3,name.length);
var obj;// = oxml.getElementById("items_1");//xml的dom里没有这个方法?
var oItems1 = oxml.getElementsByTagName("items");//也可以用xpath实现。
var oItems2 = oxml.getElementsByTagName("item");
for(var j=0;j<oItems1.length;j++){
if(oItems1[j].getAttribute('id')==xmlid){
obj = oItems1[j];
break;
}
}
for(var j=0;j<oItems2.length;j++){
if(oItems2[j].getAttribute('id')==xmlid){
obj = oItems2[j];
break;
}
}
if(obj){
obj.childNodes[0].text = fes[i].value;
}else{
alert("在xml中未找到id为"+xmlid+"的items或item");
}
}
if(name.indexOf('of_')!=-1){
var xmlid=name.substring(3,name.length);
var oItems1 = oxml.getElementsByTagName("items");
var oItems2 = oxml.getElementsByTagName("item");
for(var j=0;j<oItems1.length;j++){
if(oItems1[j].getAttribute('id')==xmlid){
obj = oItems1[j];
break;
}
}
for(var j=0;j<oItems2.length;j++){
if(oItems2[j].getAttribute('id')==xmlid){
obj = oItems2[j];
break;
}
}
if(obj){
obj.childNodes[1].text = fes[i].value;
}else{
alert("在xml中未找到id为"+xmlid+"的items或item");
}
}
}
alert(oxml.xml);
//alert(oxml.childNodes[2].xml);
return false;
}
</script>
</head>
<body>
<form name="form1" action="test.jsp" method="post" onsubmit="return btnSub();">
<script type="text/javascript">
document.write(sResult);
</script>
</form>
</body>
</html>
需要用到的辅助文件
4.focusform.css--样式文件
5.form.js文本框的效果
6.detect.js--浏览器及操作系统识别(取自javascript高级程序设计)
7.xmldom.js--不同浏览器xml操作统一(取自javascript高级程序设计)
<?xml version="1.0" encoding="UTF-8"?>
<?xml:stylesheet type="text/xsl" href="example.xsl"?>
<projects id="1">
<project title="一级标题1" index="1">
<items isTrunk="false" title="二级标题1.1" id="items_1">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
<remark></remark>
</items>
<items isTrunk="false" title="二级标题1.2" id="items_2">
<result type="2">3</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
</project>
<project title="一级标题2" index="2">
<items isTrunk="false" title="二级标题2.1" id="items_3">
<result type="3">3</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="true" title="二级标题2.2">
<item title="三级标题2.2.1" id="item_1">
<result type="1">2</result>
<officer><![CDATA[居然是乱码]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题2.2.2" id="item_2">
<result type="1">3</result>
<officer><![CDATA[<><>]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
<items isTrunk="true" title="二级标题2.3">
<item title="三级标题2.3.1" id="item_3">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题2.3.2" id="item_4">
<result type="2">1</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
</project>
<project title="一级标题3" index="3">
<items isTrunk="false" title="二级标题3.1" id="items_4">
<result type="4" units="元">25345</result>
<officer><![CDATA[sinoly]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="false" title="二级标题3.2" id="items_5">
<result type="4" units="元">9865764</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="false" title="二级标题3.3" id="items_6">
<result type="2">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</items>
<items isTrunk="true" title="二级标题3.4">
<item title="三级标题3.4.1" id="item_5">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题3.4.2" id="item_6">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
<item title="三级标题3.4.3" id="item_7">
<result type="1">0</result>
<officer><![CDATA[]]></officer>
<classified>1</classified>
<eligibility>0</eligibility>
</item>
</items>
</project>
</projects>
2.example.xsl--样式文件,很方便的取到xml数据
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--根模板-->
<xsl:output method="xml"/>
<xsl:template match="/">
<xsl:apply-templates select="projects/project"/>
<h6>
<button type="submit" class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="提交"> 下一步</button>
</h6>
</xsl:template>
<!--主题模板-->
<xsl:template match="project">
<TABLE border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td colspan="5" align="center" class="tright">
<h2>
<xsl:number value="position()" format="一、"/><xsl:value-of select="@title"/>
</h2>
</td>
</tr>
<xsl:apply-templates select="items"/>
</TABLE>
<BR/>
</xsl:template>
<!--一级题干模板-->
<xsl:template match="items">
<tr>
<td colspan="2" class="tright">
<xsl:number value="position()" format="1."/><xsl:value-of select="@title"/>
</td>
<xsl:choose>
<xsl:when test="@isTrunk[.='false']">
<xsl:apply-templates select="result"/>
<xsl:apply-templates select="officer"/>
</xsl:when>
<xsl:otherwise>
<td colspan="3" class="tright" style="color:blue;font-weight:bolder">
注意以下几点
</td>
<xsl:apply-templates select="item"/>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:template>
<!--二级题干模板-->
<xsl:template match="item">
<tr>
<td class="tright" style="padding-left:20px" colspan="2">
<h4><xsl:number value="position()" format="(a)."/><xsl:value-of select="@title"/></h4>
</td>
<xsl:apply-templates select="result"/>
<xsl:apply-templates select="officer"/>
</tr>
</xsl:template>
<!--选择框模板-->
<xsl:template match="result">
<xsl:choose>
<xsl:when test="@type = '1'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<!--<select name="select">-->
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">符合</option>
<option value="2">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">符合</option>
<option value="2">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='2'">
<option value="0">请选择 </option>
<option value="1">符合</option>
<option value="2" selected="selected">基本符合</option>
<option value="3">不符合</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">符合</option>
<option value="2">基本符合</option>
<option value="3" selected="selected">不符合</option>
</xsl:when>
</xsl:choose>
<!--</select>-->
</xsl:element>
</td>
</xsl:when>
<xsl:when test="@type = '2'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">是</option>
<option value="2">否</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">是</option>
<option value="2">否</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">是</option>
<option value="2" selected="selected">否</option>
</xsl:when>
</xsl:choose>
</xsl:element>
</td>
</xsl:when>
<xsl:when test="@type = '3'">
<td width="15%">
<xsl:element name="select">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:choose>
<xsl:when test=".='0'">
<option value="0" selected="selected">请选择 </option>
<option value="1">有</option>
<option value="2">无</option>
</xsl:when>
<xsl:when test=".='1'">
<option value="0">请选择 </option>
<option value="1" selected="selected">有</option>
<option value="2">无</option>
</xsl:when>
<xsl:when test=".='3'">
<option value="0">请选择 </option>
<option value="1">有</option>
<option value="2" selected="selected">无</option>
</xsl:when>
</xsl:choose>
</xsl:element>
</td>
</xsl:when>
<xsl:otherwise>
<td width="15%">
<xsl:element name="textarea">
<xsl:attribute name="name">re_<xsl:value-of select="../@id"/></xsl:attribute><xsl:value-of select="."/>
</xsl:element>
<xsl:value-of select="@units"/>
</td>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<!--责任人模板-->
<xsl:template match="officer">
<td width="9%" class="tright">责任人</td>
<td width="11%">
<xsl:element name="textarea">
<xsl:attribute name="name">of_<xsl:value-of select="../@id"/></xsl:attribute>
<xsl:value-of select="."/>
</xsl:element>
</td>
</xsl:template>
</xsl:stylesheet>
3.index.html--用javascript导入数据并能修改xml里的数据.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<link rel="Stylesheet" type="text/css" href="focusform.css"/>
<script language="javascript" src="form.js"></script>
<script type="text/javascript" src="detect.js"></script>
<script type="text/javascript" src="xmldom.js"></script>
<script type="text/javascript">
//载入xml与xsl文件
var oxml = new XmlDom();
var oxsl = new XmlDom();
oxml.async = false;//同步载入
oxsl.async = false;
oxml.load("example.xml");
oxsl.load("example.xsl");
if (oxml.parseError != 0) {
var oError = oxml.parseError;
alert("An error occurred:\nError Code: "
+ oError.errorCode + "\n"
+ "Line: " + oError.line + "\n"
+ "Line Pos: " + oError.linepos + "\n"
+ "Reason: " + oError.reason);
}
if (oxsl.parseError != 0) {
var oError = oxsl.parseError;
alert("An error occurred:\nError Code: "
+ oError.errorCode + "\n"
+ "Line: " + oError.line + "\n"
+ "Line Pos: " + oError.linepos + "\n"
+ "Reason: " + oError.reason);
}
var sResult = oxml.transformNode(oxsl);
//alert(sResult);
//一些操作
function btnSub(){
var fes = document.forms[0].elements;
for(var i = 0;i<fes.length;i++){
var name = fes[i].name;
if(name.indexOf('re_')!=-1){
var xmlid=name.substring(3,name.length);
var obj;// = oxml.getElementById("items_1");//xml的dom里没有这个方法?
var oItems1 = oxml.getElementsByTagName("items");//也可以用xpath实现。
var oItems2 = oxml.getElementsByTagName("item");
for(var j=0;j<oItems1.length;j++){
if(oItems1[j].getAttribute('id')==xmlid){
obj = oItems1[j];
break;
}
}
for(var j=0;j<oItems2.length;j++){
if(oItems2[j].getAttribute('id')==xmlid){
obj = oItems2[j];
break;
}
}
if(obj){
obj.childNodes[0].text = fes[i].value;
}else{
alert("在xml中未找到id为"+xmlid+"的items或item");
}
}
if(name.indexOf('of_')!=-1){
var xmlid=name.substring(3,name.length);
var oItems1 = oxml.getElementsByTagName("items");
var oItems2 = oxml.getElementsByTagName("item");
for(var j=0;j<oItems1.length;j++){
if(oItems1[j].getAttribute('id')==xmlid){
obj = oItems1[j];
break;
}
}
for(var j=0;j<oItems2.length;j++){
if(oItems2[j].getAttribute('id')==xmlid){
obj = oItems2[j];
break;
}
}
if(obj){
obj.childNodes[1].text = fes[i].value;
}else{
alert("在xml中未找到id为"+xmlid+"的items或item");
}
}
}
alert(oxml.xml);
//alert(oxml.childNodes[2].xml);
return false;
}
</script>
</head>
<body>
<form name="form1" action="test.jsp" method="post" onsubmit="return btnSub();">
<script type="text/javascript">
document.write(sResult);
</script>
</form>
</body>
</html>
需要用到的辅助文件
4.focusform.css--样式文件
5.form.js文本框的效果
6.detect.js--浏览器及操作系统识别(取自javascript高级程序设计)
7.xmldom.js--不同浏览器xml操作统一(取自javascript高级程序设计)