基于内容设置HTML表格单元格背景颜色的XSLT实现方法

嘿，作为纯新手能动手写XSLT表格已经超棒啦！针对你想根据RATING的GOOD/MEDIUM/BAD值给单元格（优先）或整行设置对应绿、黄、红背景色的需求，我给你整理了两种新手友好的实现方式，一步步来很容易上手～

方法1：给RATING对应的单元格单独设置背景色（优先推荐） #

这种方式精准针对目标单元格，不会影响整行其他内容，逻辑清晰好维护：

步骤说明 #

1. 先假设你的XML数据结构大概是这样（如果和你的实际结构不一样，替换对应的节点路径就行）：

<items>
  <item>
    <NAME>产品A</NAME>
    <RATING>GOOD</RATING>
    <PRICE>100</PRICE>
  </item>
  <item>
    <NAME>产品B</NAME>
    <RATING>MEDIUM</RATING>
    <PRICE>80</PRICE>
  </item>
  <item>
    <NAME>产品C</NAME>
    <RATING>BAD</RATING>
    <PRICE>50</PRICE>
  </item>
</items>

2. 在你的XSLT表格代码里，针对RATING对应的<td>标签，用<xsl:choose>做条件判断，动态添加style属性设置背景色：

<table width="1000" border="0" cellspacing="0" cellpadding="0" class="table-fi">
  <!-- 表头行 -->
  <tr>
    <th>名称</th>
    <th>评级</th>
    <th>价格</th>
  </tr>
  <!-- 遍历数据生成表格行 -->
  <xsl:for-each select="items/item">
    <tr>
      <td><xsl:value-of select="NAME"/></td>
      <td>
        <!-- 核心：根据RATING值设置单元格背景色 -->
        <xsl:attribute name="style">
          <xsl:choose>
            <xsl:when test="RATING = 'GOOD'">background-color: #90EE90;</xsl:when> <!-- 浅绿色 -->
            <xsl:when test="RATING = 'MEDIUM'">background-color: #FFFFE0;</xsl:when> <!-- 浅黄色 -->
            <xsl:when test="RATING = 'BAD'">background-color: #FFB6C1;</xsl:when> <!-- 浅红色 -->
            <!-- 默认情况：没有匹配到值时保持透明 -->
            <xsl:otherwise>background-color: transparent;</xsl:otherwise>
          </xsl:choose>
        </xsl:attribute>
        <xsl:value-of select="RATING"/>
      </td>
      <td><xsl:value-of select="PRICE"/></td>
    </tr>
  </xsl:for-each>
</table>

你可以把颜色值换成自己喜欢的，比如直接用颜色名green/yellow/red，不过柔和的浅色调在表格里会更美观哦。

方法2：给整行设置背景色 #

如果之后需要整行跟着RATING值变色，只需要把条件判断移到<tr>标签上就行：

<table width="1000" border="0" cellspacing="0" cellpadding="0" class="table-fi">
  <tr>
    <th>名称</th>
    <th>评级</th>
    <th>价格</th>
  </tr>
  <xsl:for-each select="items/item">
    <tr>
      <!-- 核心：给整行设置背景色 -->
      <xsl:attribute name="style">
        <xsl:choose>
          <xsl:when test="RATING = 'GOOD'">background-color: #E8F5E9;</xsl:when>
          <xsl:when test="RATING = 'MEDIUM'">background-color: #FFF9C4;</xsl:when>
          <xsl:when test="RATING = 'BAD'">background-color: #FFCDD2;</xsl:when>
          <xsl:otherwise>background-color: transparent;</xsl:otherwise>
        </xsl:choose>
      </xsl:attribute>
      <td><xsl:value-of select="NAME"/></td>
      <td><xsl:value-of select="RATING"/></td>
      <td><xsl:value-of select="PRICE"/></td>
    </tr>
  </xsl:for-each>
</table>

新手小技巧 #

如果你的环境支持XSLT 2.0及以上版本，还可以用属性值模板简化代码，不用写冗长的<xsl:attribute>，比如单元格的写法可以简化成：

<td style="{
  if (RATING='GOOD') then 'background-color: #90EE90;'
  else if (RATING='MEDIUM') then 'background-color: #FFFFE0;'
  else if (RATING='BAD') then 'background-color: #FFB6C1;'
  else 'background-color: transparent;'
}">
  <xsl:value-of select="RATING"/>
</td>

不过如果是XSLT 1.0环境，还是用<xsl:choose>更稳妥哦。

内容的提问来源于stack exchange，提问作者Greg Symsym