javascript xml xsl取值及数据修改

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高级程序设计)