XSL üzerinden sıralı renklere sahip HTML tablosu

Question

Bir HTML tablosunda sıra renklerini değiştirmenin en kolay yolu nedir (a.ka. şeritleme). Tablolarımın birçoğu, aşağıdaki gibi XSL şablonlarında oluşturulmuş, tablo, thead vb. Ile başka bir şablonda tanımlanmıştır.

<xsl:template match="typ:info"> 
    <tr> 
    <td> 
     <xsl:value-of select="typ:dateAccessed" /> 
    </td> 
    <td> 
     <xsl:value-of select="typ:loginId" /> 
    </td> 
    </tr> 
</xsl:template> 

Tercihlerim, öğeler üzerinde alternatif sınıflar kullanmaktır. HTML'de kodlanmış renkler üretmek gerekiyorsa

Answer 1

:

<xsl:template match="typ:info"> 
    <xsl:variable name="css-class"> 
    <xsl:choose> 
     <xsl:when test="position() mod 2 = 0">even</xsl:when> 
     <xsl:otherwise>odd</xsl:otherwise> 
    </xsl:choose> 
    </xsl:variable> 
    <tr class="{$css-class}"> 
    <td> 
     <xsl:value-of select="typ:dateAccessed" /> 
    </td> 
    <td> 
     <xsl:value-of select="typ:loginId" /> 
    </td> 
    </tr> 
</xsl:template> 

bugünün tarayıcılar ile CSS ve tr:nth-child(odd) kullanmanız çok daha iyi.

Bu, XSLT tarafında daha az sorun çıkarır, daha temiz HTML biçimlendirmesi - ve bu, istemci tarafı tablo sıralaması ve filtreleme ile uyumludur.

<xsl:choose> 
    <xsl:when test="position() mod 2 = 1"> 
     <td class="odds">blah</td> 
    </xsl:when> 
    <xsl:otherwise> 
     <td class="even">blah</td> 
    </xsl:otherwise> 
</xsl:choose> 

DÜZENLEME: etrafında iç çekiş benim tek/çift doğru yolu Başlarken gibi gerektiğinde sınıfları değiştirmek için tek veya çift satır almak için zaman ve pozisyon mod 2 karşılaştır:

Answer 2

bir XSL'yi kullanın

Answer 3

İç değerini değiştirmek için bir değişkenin içinden ne zaman seçilebileceğine, bunun yerine yalnızca sınıf adını değiştirmek isteyebilir miyiz? Böyle bir şey: Bununla

<xsl:variable name="myDemoClass" > 
    <xsl:choose> 
    <xsl:when test="position() mod 2 = 0"> 
     <xsl:text>myDemoClass</xsl:text> 
    </xsl:when> 
    <xsl:otherwise> 
     <xsl:text>myDemoClass otherClass</xsl:text> 
    </xsl:otherwise> 
    </xsl:choose> 
</xsl:variable> 

, biz değişken adını değiştirmek için ve sonra biz, örneğin bir div class içeriğini değiştirebilir edebiliyoruz.

<div class="{$myDemoClass}"> 

Saygılar!

Answer 4

Ayrıca css3'ü de kullanabilirsiniz.

tr:nth-child(odd) { background: #ff0000; } 

Diğer tüm tarayıcılar tarafından oldukça uzun bir süre IE9'dan itibaren desteklenir.