xml文档显示效果

yuwei2008vip

浏览: 38680 次
性别:
来自: 深圳

最近访客更多访客>>

taoge2121

Dream.V

whh12345

YZBYZZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xml知识点滴

XML XSL

效果图：

xml部分：

<?xml version="1.0" encoding="UTF-8"?>   
<?xml-stylesheet type='text/xsl' href='model.xsl'?>   
<model>   
  <title />   
  <ability id="ABC">   
    <avgTime>0min  2sec   0ms</avgTime>   
    <times count="1">   
      <useTime>0min  2sec   0ms</useTime>   
    </times>   
    <tagTime>3</tagTime>   
    <isStandard>达标</isStandard>   
  </ability>   
  <ability id="DEF">   
    <avgTime>0min  2sec   0ms</avgTime>   
    <times count="1">   
      <useTime>0min  2sec   0ms</useTime>   
    </times>   
    <times count="1">   
      <useTime>0min  2sec   0ms</useTime>   
    </times>   
    <times count="1">   
      <useTime>0min  2sec   0ms</useTime>   
    </times>   
    <tagTime>3</tagTime>   
    <isStandard>未达标</isStandard>   
  </ability>   
</model>

xsl部分：

<?xml version="1.0" encoding="GB2312"?>   
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">   
<xsl:template match="/model">   
<html>   
    <head>   
        <title></title>   
        <style type="text/css">   
               
            .title{   
                font-family:verdana,tahoma;   
                font-size:18px;   
                line-height:17px;   
                margin:20px 0 10px 0;   
            }   
            body {   
                color: #4f6b72;   
                background: #E6EAE9;   
            }   
            table{   
                width:95%;   
                padding: 0;   
                margin: 0;   
                border-collapse:collapse;   
                border-spacing:0;   
            }   
            table.inner{   
                width:100%;   
                height:100%;   
                padding: 0;   
                margin: 0;   
                border-collapse:collapse;   
                border-spacing:0;   
            }   
            td{   
                border: 1px solid #C1DAD7;   
                background: #fff;   
                font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;   
                padding: 6px 0 6px 0;   
                color: #4f6b72;   
                text-align:center;   
            }   
            td.inner{   
                height:100%;   
                border: 1px solid #C1DAD7;   
                background: #fff;   
                font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;   
                padding: 0;   
                color: #4f6b72;   
                text-align:center;   
            }   
            th{   
                border: 1px solid #C1DAD7;   
                background: #DCF0F0;   
                font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;   
                padding: 6px 6px 6px 12px;   
                color: #797268;   
                text-align:center;   
            }   
            td.alt{   
                background: #EBF5EB;   
                color: #797268;   
                padding: 6px 0 6px 0;   
            }   
            td.wd{   
                width:1%;   
                height:50%;   
            }  
			#tongji{
				text-align:right;
			}
        </style>   
		<script type="text/javascript">
			function fun()
			{
				var tablObj=document.getElementById("myTabl");
				var standnum=0;
				var nStandnum=0;
				for(var i=1,n=tablObj.rows.length-1;i&lt;n;i++)
				{
					if(tablObj.rows[i].cells[5].innerText.indexOf("未达标")!=-1)
					{
						nStandnum++;
					}
					else
					{
						standnum++;
					}
				}
				document.getElementById("tongji").innerText="统计  达标: "+standnum+"	未达标: "+standnum+"         ";
			}
		</script>
    </head>   
    <body onload="fun()">   
    <center><div class="title"><xsl:value-of select="title"/></div></center>   
    <table align="center" cellspacing="0" id="myTabl">   
        <tr>   
            <th width="8%">编号</th>   
            <th width="26%">操作名称</th>   
            <th width="35%">操作使用时间</th>   
            <th width="13%">平均使用时间</th>   
            <th width="8%">达标时间</th>   
            <th width="10%">是否达标</th>   
        </tr>   
        <xsl:for-each select="ability[position()]">   
        <tr>   
            <td><xsl:value-of select="position()" /></td>   
            <td rolspan="2" style="text-align:center"><xsl:value-of select="@id"/></td>   
            <td class="inner">   
                <table align="center" cellspacing="0" class="inner">   
                    <tr>   
                        <xsl:for-each select="times">   
                            <td class="alt wd"><xsl:value-of select="@count"/></td>   
                        </xsl:for-each>   
                    </tr>   
                    <tr>   
                        <xsl:for-each select="times">   
                            <td class="wd"><xsl:value-of select="useTime"/></td>   
                        </xsl:for-each>   
                    </tr>   
                </table>   
            </td>   
            <td><xsl:value-of select="avgTime"/></td>   
            <td><xsl:value-of select="tagTime"/></td>   
            <td>
				<xsl:if test="isStandard='达标'">
					<font color="green"><xsl:value-of select="isStandard"/></font>
				</xsl:if>
				<xsl:if test="isStandard='未达标'">
					<font color="red"><xsl:value-of select="isStandard"/></font>
				</xsl:if>
			</td>   
        </tr>   
        </xsl:for-each>
		<tr>
			<td colspan="6" id="tongji"></td>
		</tr>
    </table>   
    </body>   
</html>   
</xsl:template>   
</xsl:stylesheet>