css - 使用 XML 和 XSLT 的斑马条纹表

Question

我查看了 StackOverflow 网站上的许多帖子，虽然我对如何进行斑马条纹有了一些了解，但没有帖子展示了如何实现它的完整示例。

我刚刚开始学习使用 XSLT，所以我确定这是因为我缺少一个更大的图景。

我的 XML 表和 XSL 部分包含在下面。

我省略了上面其他标签的所有数据，但包含了父标签。

XML

 <chapter>
     <section>
         <table-c>
             <tr> <td>Adept        </td> <td>spell-caster   </td> </tr>
             <tr> <td>Archers      </td> <td>warrior        </td>  </tr>
             <tr> <td>Bard         </td> <td>specialist     </td> </tr>
             <tr> <td>Barbarian    </td> <td>warrior        </td> </tr>
             <tr> <td>Cavalier     </td> <td>warrior        </td> </tr>
             <tr> <td>Cleric       </td> <td>spellcaster    </td> </tr>
             <tr> <td>Druid        </td> <td>spellcaster    </td> </tr>
             <tr> <td>Healer       </td> <td>spellcaster    </td> </tr>
             <tr> <td>Jumper       </td> <td>specialist     </td> </tr>
             <tr> <td>Martialist   </td> <td>warrior        </td> </tr>
             <tr> <td>Necromancer  </td> <td>spell-caster   </td> </tr>
             <tr> <td>Paladin      </td> <td>warrior        </td> </tr>
             <tr> <td>Ranger       </td> <td>warrior        </td> </tr>
             <tr> <td>Rogue        </td> <td>specialist     </td> </tr>
             <tr> <td>Sniper       </td> <td>specialist     </td> </tr>
             <tr> <td>Sorcerer     </td> <td>spellcaster    </td> </tr>
             <tr> <td>Swashbuckler </td> <td>warrior        </td> </tr>
             <tr> <td>Witch        </td> <td>spellcaster    </td> </tr>
             <tr> <td>Wizard       </td> <td>spellcaster    </td> </tr>
          </table-c>
    </section>
 </chapter>

XSL

<xsl:template match="table-c">
<!-- Table is center justified -->

  <table style="margin-left:auto;
        margin-right:auto;
        margin-top:1em;
        margin-bottom:1em;
        ">

<xsl:for-each select="tr">      
  <xsl:if test="position() mod 2 = 1">
    <xsl:attribute name="style">background-color:blue;</xsl:attribute>
      <tr>          
        <xsl:apply-templates/>
      </tr>
 </xsl:if>
</xsl:for-each>

我只是不知道如何在创建属性后实现该属性。(我什至不确定我是否正确创建了它)。

此特定代码导致 xsl 解析器因错误而停止。

我的 XML 文件看起来不错，直到我在 for-each 标记之间添加了这些行。

我不能使用 CSS nth child 选项，因为当我这样做时，它会影响 xsl 文件中的所有其他表格设置。我需要能够对各种表格应用不同的样式，所以当我得到 strip 化方法时，我会将该方法应用到不同的模板。

除非有人知道如何将 css 样式表方法限制在单个 xsl 模板中。那太棒了，但到目前为止我还没有在 Internet 上找到任何表明它可以完成的东西。

Answer 1

好的，我找到了获胜的答案。

<xsl:template match="table-c">
<!-- Table is center justified -->

  <table style="margin-left:auto;
        margin-right:auto;
        margin-top:1em;
        margin-bottom;1em;
        ">

    <xsl:for-each select="tr">
      <tr>
        <xsl:choose>
          <xsl:when test="position() mod 2 = 1">
            <xsl:attribute name="style">background-color:cyan</xsl:attribute>
          </xsl:when>
          <xsl:otherwise>
            <xsl:attribute name="style">background-color:gray</xsl:attribute>
          </xsl:otherwise>
        </xsl:choose>
       <xsl:apply-templates/>
      </tr>
  </xsl:for-each>

  </table>

</xsl:template>

对于所有刚刚学习 XSLT 并需要详细解释正在发生的事情的人......这里是:

我假设您已经知道如何在 XSL 中应用基本模板。如果没有，请访问 W3C SCHOOLS 网站并了解这一点。

获得交替颜色行(又名斑马条纹)的关键是将奇数或偶数代码的行/决策包装在 for-each 循环中。这会遍历表的每一行，并在每次循环迭代中决定行的位置。对我来说，突破是发现 xsl:choose/xsl:when 代码在行内时确定它在哪一行。注意 是关闭之前的最后一行，也就是关闭之后。在选择代码找出它所在的行并相应地设置样式之后，然后将该样式应用于该行。然后，for-each 循环移动到下一行，然后 choose/when 代码重新开始以找出它在哪一行。

虽然我的示例保持简单，但您看不到的是我的 xsl 文件有几个表格模板，我能够使用这段代码并将所有样式设置应用到其他各种表格模板。

出于某种原因，XSL 的创建者没有在他们的 xsl:if 中包含 if/then 或 if/else-if/else。如果你想要那种类型的功能，那么你必须使用那个疯狂的选择/当他们想出的时候。