通過XSL交替排列行的HTML表格

在HTML表格（a.ka. striping）中交替行的最簡單方法是什麼？我的大多數表格都是在XSL模板中創建的，如下所示，在另一個模板中定義表格，thead等。通過XSL交替排列行的HTML表格

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

我喜歡在元素上使用交替類。

來源

2009-01-22 JoelB

如果必須在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>

今天的瀏覽器，你好得多使用CSS和tr:nth-child(odd)。

這樣可以減少XSLT方面的麻煩，更清潔的HTML標記 - 並且它與客戶端表格排序和過濾功能兼容。需要像時當和比較位置MOD 2中得到奇數或偶數行改變類：

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

編輯：四處逛逛我的奇/偶正道嘆息

來源

2009-01-22 17:01:53 Tomalak

使用XSL

來源

2009-01-22 17:03:54 Wolfwyrd

我們可以只改變類名，而可以在變量內部選擇以改變其內部值。事情是這樣的：

<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類的內容。

<div class="{$myDemoClass}">

問候！

來源

2010-11-04 20:09:07

你爲什麼重複接受的答案？ – 2010-11-04 20:24:59

你也可以使用css3。

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

自IE9以來一直支持所有其他瀏覽器的相當一段時間。

來源

2011-05-01 11:40:40 Gerben

通過XSL交替排列行的HTML表格

回答

相關問題