एक्सएसएल

Question

के माध्यम से वैकल्पिक पंक्ति रंगों के साथ HTML तालिका HTML तालिका (a.ka. स्ट्रिपिंग) में वैकल्पिक पंक्ति रंगों का सबसे आसान तरीका क्या है। मेरी अधिकांश तालिकाएं एक्सएसएल टेम्पलेट्स में निम्न की तरह बनाई गई हैं, तालिका, थैड, आदि के साथ .. किसी अन्य टेम्पलेट में परिभाषित किया गया है।

<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> 

मेरी वरीयता तत्वों पर वैकल्पिक कक्षाओं का उपयोग करना है।

Answer 1

यदि आप HTML में हार्ड-कोडेड रंग का उत्पादन होगा:

<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> 

आज के ब्राउज़रों के साथ आप सीएसएस और tr:nth-child(odd) का उपयोग कर बंद काफी बेहतर हैं।

इस परिणामस्वरूप एक्सएसएलटी पक्ष पर बहुत परेशानी होती है, बहुत साफ एचटीएमएल मार्कअप - और यह क्लाइंट-साइड टेबल सॉर्टिंग और -फिल्टरिंग के साथ संगत है।

<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> 

संपादित करें: मेरी अजीब/भी सही तरीके से चारों ओर आह हो रही है जब की तरह की जरूरत जब और स्थिति आधुनिक 2 तुलना अजीब या भी पंक्तियों वर्गों को बदलने के लिए प्राप्त करने के लिए:

Answer 2

एक XSL का उपयोग करें

Answer 3

मई हम इसके बजाय केवल कक्षा का नाम बदलना चाहते हैं, जब एक चर के अंदर अपना आंतरिक मूल्य बदलने में सक्षम हो सकता है। कुछ इस तरह:

<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> 

इस के साथ

, हम चर नाम बदलने के लिए और फिर हम, एक div class सामग्री उदाहरण के लिए बदल सकते हैं कर सकते हैं।

<div class="{$myDemoClass}"> 

सम्मान!

Answer 4

आप सीएसएस 3 का भी उपयोग कर सकते हैं।

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

अन्य सभी ब्राउज़रों द्वारा आईई 9 के रूप में समर्थित कुछ समय के लिए समर्थित।