用xml+xslt实现表格背景色按行交替设置

最新推荐文章于 2021-06-16 21:59:46 发布
原创 最新推荐文章于 2021-06-16 21:59:46 发布 · 3.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xslt #xml #xsl #stylesheet #encoding #microsoft

本文展示了如何利用XSLT和XML来实现网页中表格的背景色按行交替显示，通过示例解释了如何处理XML文档并应用XSL样式表，创建出美观的表格布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在网络上经常可以看到背景色按行交替设置的表格，比较美观。但未必需要什么高深的服务器技术，用简单的xsl+xml照样能很好的实现他们。

比如，我们有这么一个记录网址的xml文档：

<?xml version="1.0" encoding="utf-8" ?>

<?xml-stylesheet type="text/xsl" href="XSLTFileLlink.xsl" ?>

<items>

   <roomitem>

      <text>新浪</text>

      <link>http://www.sina.com.cn</link>

    </roomitem>

    <roomitem>

      <text>yahoo</text>

      <link>http://www.yahoo.com</link>

    </roomitem>

    <roomitem>

      <text>google</text>

      <link>http://www.google.com</link>

    </roomitem>

    <studyitem>

      <text>html简易教程</text>   

      <link><a href="http://www.shanxiwindow.net/teaching/htmlbook/">go</a></link>

    </studyitem>

    <studyitem> 

      <text>javascript中文简介</text>

      <link>http://www.lib.tsinghua.edu.cn/chinese/INTERNET/JavaScript/</link>

    </studyitem>

    <studyitem> 

      <text>msdn中文站点</text>

      <link>http://www.microsoft.com/china/msdn/default.mspx</link>

    </studyitem>

    <studyitem>

      <text>Microsoft .Net 框架 SDK 快速入门教程</text>

      <link>http://chs.gotdotnet.com/quickstart/default.aspx</link>

    </studyitem>

</items>

现在，我希望按照其分类，把他表现成两个颜色按行交替的表格。如下图所示：

 Xsl可以如此写出，

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 

<xsl:template match="/">

    <html>     

    <body>

    <!--

        This is an XSLT template file. Fill in this area with the

        XSL elements which will transform your XML to XHTML.

    -->

      <h1>XSLT应用测试</h1>

      <hr />

      <h3>功能类：</h3>

      <table width="100%" border="1">

        <tr bgcolor="#C9BBAD">

          <th>name</th>

          <th>link</th>

        </tr>

        <xsl:for-each select="items/roomitem">

          <xsl:choose>

            <xsl:when test="(position() mod 2) = 0">

            <tr bgcolor="#C9BBAD">

            <td>

              <xsl:value-of select="text" />

            </td>

            <td>

              <xsl:value-of select="link" />

            </td>

            </tr>

            </xsl:when>

            <xsl:otherwise>

              <tr>

                <td>

                  <xsl:value-of select="text" />

                </td>

                <td>

                  <xsl:value-of select="link" />

                </td>

              </tr>

            </xsl:otherwise>

          </xsl:choose>

        </xsl:for-each>

      </table>

      <br />

      <h3>资源类：</h3>

      <table width="100%" border="1">

        <tr bgcolor="#C9BBAD">

          <th>name</th>

          <th>link</th>

        </tr>

        <xsl:for-each select="items/studyitem">

          <xsl:choose>

            <xsl:when test="(position() mod 2) = 0">

              <tr bgcolor="#C9BBAD">

                <td>

                  <xsl:value-of select="text" />

                </td>

                <td>

                  <xsl:value-of select="link" />

                </td>

              </tr>

            </xsl:when>

            <xsl:otherwise>

              <tr>

                <td>

                  <xsl:value-of select="text" />

                </td>

                <td>

                  <xsl:value-of select="link" />

                </td>

              </tr>

            </xsl:otherwise>

          </xsl:choose>

        </xsl:for-each>

      </table>

    </body>

    </html>

</xsl:template>

 

</xsl:stylesheet>

 

 

XML+XSLT实现表格颜色交替，某列背景根据数据显示不同颜色
闫炜的专栏
01-19 3057
新建一个WebForm，在Form上添加一个XML控件。设置其属性： 数据文件PipeLineData.xml的内容：    10244  Henan Netcom  Ying-Ge Li; Yinge Li; Jenny Sui Sui (Fesco);   18  Engagement Completed  2005-12-20  2006-01-31  C. Room 1822
[转]android颜色对应的xml配置值
lishuiqing的专栏
10-14 2282
#FFFFFF #FFFFF0 #FFFFE0 #FFFF00 #FFFAFA #FFFAF0 #FFFACD #FFF8DC #FFF5EE #FFF0F5 #FFEFD5 #FFEBCD #FFE4E1 #FFE4C4 #FFE4B5 #FFDEAD #FFDAB9 #FFD700 #FFC0CB #FFB6C1 #FFA500 #FFA07A...
xml与xsl制作表格实例
06-15
仅仅是个实例，颜色动态等还需自己动手，好好看看吧！非常管用
xslt 定义表格html表格样式,XSLT <xsl:template> 元素
weixin_34430580的博客
06-16 156
元素 元素用于构建模板。match 属性用于关联 XML 元素和模板。match 属性也可用来为整个文档定义模板。match 属性的值是 XPath 表达式(举例，match="/" 定义整个文档)。好了，让我们看一下上一节中的 XSL 文件的简化版本：xmlns:xsl="http://www.w3.org/1999/XSL/Transform">My CD CollectionTitl...
Xml+Xslt测试工具
07-21
XML（可扩展标记语言）和XSLT（可扩展样式表语言转换）是Web开发中的核心技术，用于数据存储和格式化。XML是一种标记语言，它允许数据以结构化的方式进行组织，而XSLT则是一种专门用于转换XML文档的语言，可以将XML...
xml+xslt + js表格排序
03-05
通过应用XSLT，可以控制XML数据的呈现方式，比如设置表格样式、添加表头、定义单元格格式等。 3. **JavaScript (JS)**：JavaScript是前端开发的主要脚本语言，用于实现动态交互效果。在这个场景下，JS可能被用来...
JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2
08-06
3.2.4 用dom解析xml文档实例 53 3.3 使用sax解析xml文档 65 3.3.1 sax的处理机制 66 3.3.2 配置sax解析器 69 3.3.3 sax解析器工厂 70 3.3.4 sax的异常类 71 3.3.5 errorhandler接口 73 3.3.6 使用sax解析xml...
xslt使用,实现未知XML表字段内容的,表格输出,
weixin_34025151的博客
05-22 163
&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;  &lt;xsl:template match="/"&gt;    &lt;table c
【报表】 XSLT 解析普通XML生成表格型XML（三）
mm1983abc的专栏
06-28 318
[b]3. XSLT 解析XML为表格型XML的实例（具体请参考附件）[/b] [code="txt"]附件内容： 1. DepInOutData.xml --- 源数据xml 2. Pattern.xsl --- xslt文件 3. DepInOutDataResult.xml ---解析结果 [/code] [color=blue]* 感兴趣的人可以去下个Ec...
【报表】 XSLT 解析普通XML生成表格型XML（二）
mm1983abc的专栏
06-24 196
2. 在第一步的基础上，参考一些具体的实例，学习下XSLT的API等（不用刻意去学，大概看看，用的时候知道有这个方法可以使用，具体怎么用不用管） xslt standard库： http://xsltsl.sourceforge.net/ exslt 扩展库： http://www.exslt.org/ xslt 使用： http://www.csharpwin.net/ddws...
xslt 定义表格html表格样式,使用XSLT和XML创建HTML表格，选择一组特定的元素？
weixin_39642998的博客
06-16 167
我需要在HTML中从XSLT文件创建一个表格，但只选择特定的一组节点。例如在下面的XML我想从和子节点选择所有的地方routename包含FCO-DXB：使用XSLT和XML创建HTML表格，选择一组特定的元素？xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="flights.xs...
xslt 定义表格html表格样式,如何使用XSLT从平面xml文件创建html列表
weixin_39519554的博客
06-16 116
这种转变：xmlns:xsl="http://www.w3.org/1999/XSL/Transform">use="generate-id(preceding-sibling::para[1])"/>select="key('kFollowing',generate-id())"/>select="key('kFollowing',generate-id())"/>当应用...
xml 与 xsl 显示图片
Sisony的专栏
03-04 3496
文件: mystyle.xsl http://www.w3.org/1999/XSL/Transform">                                                                                                                                              
XSL技巧：实现表格中行的交替颜色
Sank Orange的专栏
12-13 4630
xml.xml： 1 2 3xml.xsl:http://www.w3.org/1999/XSL/Transform" >                   background-color:yellow;         
基于XML+XSLT+Jquery+asp.net实现库存查询及分页功能
通过定义XSLT模板，我们可以指定如何将特定的XML元素映射到HTML元素上，例如将库存项目转换为表格行。 Jquery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理，以及动画和Ajax交互。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值