使用xsl格式化显示xml,将xml显示在html中

最新推荐文章于 2024-07-17 00:00:00 发布

iailp47

最新推荐文章于 2024-07-17 00:00:00 发布

阅读量2.6k

点赞数 1

分类专栏： Java 文章标签： xsl xml

本文链接：https://blog.csdn.net/iailp47/article/details/46912971

版权

Java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

User.xml

<?xml version='1.0' encoding='gb2312'?>
<!--<?xml-stylesheet type="text/xsl" href="list.xsl"?>-->
<list>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>13570271006</user_id>
        <user_name>二之国</user_name>
        <request_ip>172.20.16.156</request_ip>
        <login_time>2015-03-25 18:21:39.133</login_time>
    </User>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>6008000014868501</user_id>
        <user_name>小号</user_name>
        <request_ip>218.19.216.194</request_ip>
        <login_time>2015-05-20 17:24:39.023</login_time>
    </User>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>000000000066973</user_id>
        <user_name>abc</user_name>
        <request_ip>172.20.16.153</request_ip>
        <login_time>2015-06-29 14:35:58.556</login_time>
    </User>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>mystore001@163.com</user_id>
        <user_name>天河大厦</user_name>
        <request_ip>172.20.58.221</request_ip>
        <login_time>2015-05-07 10:57:25.123</login_time>
    </User>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>000000000064352</user_id>
        <user_name>易POS服务商</user_name>
        <request_ip>172.20.16.71</request_ip>
        <login_time>2015-05-22 09:37:08.27</login_time>
    </User>
    <User>
        <app_time>2015-07-14 11:39:31.63</app_time>
        <user_id>13312345503</user_id>
        <user_name>13312345503</user_name>
        <request_ip>127.0.0.1</request_ip>
        <login_time>2015-03-17 10:19:44.656</login_time>
    </User>
</list>

list.xsl

<?xml version="1.0" encoding="GBK"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">	
		<table width="100%" border="0" cellspacing="1" cellpadding="1"
			bgcolor="#B0C4DE" bordercolordark="#FFFFFF" id="tbList" class="tbList">
			<tr height="20" bgcolor="#eeeeee" class="listTrTitle">
				<th align="center" class="text" >选择</th>
				<th align="center" class="text" >user_id</th>
				<th align="center" class="text" >user_name</th>
				<th align="center" class="text" >request_ip</th>				
				<th align="center" class="text" >login_time</th>
				<th align="center" class="text" >app_time</th>			
			</tr>
			<xsl:for-each select="list/User">
				<xsl:element name="tr">			
					<xsl:attribute name="id">
						<xsl:text>LIST</xsl:text>
					</xsl:attribute>
					<xsl:attribute name="height">
						<xsl:text>20</xsl:text>
					</xsl:attribute>
					<xsl:attribute name="bgcolor">
						<xsl:text>#FFFFFF</xsl:text>
					</xsl:attribute>

					<td class="text" align="center" style="width:40px">
						<input type="radio" text="seleRow"></input>
					</td>
					
					<td class="text" align="center">
						<xsl:value-of select="user_id" />    
					</td>
					<td class="text" align="center">
						<xsl:value-of select="user_name" />    
					</td>
					<td class="text" align="center"> 
						<xsl:value-of select="request_ip" />    
					</td>					
					<td class="text" align="center">
						<xsl:value-of select="login_time" /> 
					</td>
					<td class="text" align="center">
						<xsl:value-of select="app_time" /> 
					</td>
				</xsl:element>
			</xsl:for-each>
		</table>
	</xsl:template>
</xsl:stylesheet>

直接显示用xsl格式化后的xml效果(将User.xml中第二行反注释掉）

将xml文档，使用xsl格式处理后，加载到html中的div中

（Chrome因为安全机制，不能加载本地的xml文档，下面的html用chrome浏览器会出错

<html>
	<body>
		<script type="text/javascript">
		function show(){
			if(window.ActiveXObject){
				// support IE
				var xml = new ActiveXObject("Microsoft.XMLDOM");
				var xsl =  new ActiveXObject("Microsoft.XMLDOM");
			}else{
				// support firefox
				var xml = document.implementation.createDocument("", "", null);
				var xsl = document.implementation.createDocument("", "", null);
			}		
			xml.async = false;
			xsl.async = false;
			
			try{
				// Load XML				
				xml.load("User.xml");
				// Load XSL
				xsl.load("list.xsl");			
			}catch(e){

			}

			// Transform
			if(window.ActiveXObject){
				document.write(xml.transformNode(xsl));
			}else    // FireFox  
			{  
				//定义XSLTProcesor对象  
				var xsltProcessor=new XSLTProcessor();  
				xsltProcessor.importStylesheet(xsl);  
				// transformToDocument方式  
				var result=xsltProcessor.transformToDocument(xml);  
				var xmls=new XMLSerializer();  
				var rt = xmls.serializeToString(result);  
				document.getElementById("div1").innerHTML =rt;  
			}
		
		}							
			
		</script>
		<input type ="button" value ="show" onclick ="show();"></input>

		<div id="div1" style="width:100%; height:90%;overflow:auto;border:1px solid #000000;">
		
		<div>
	</body>
</html>

点击按钮show，将xml文档显示在指定div中，显示效果如