16

HTML テーブルの行の色を交互にする最も簡単な方法は何ですか (別名ストライピング)。私のテーブルのほとんどは、次のような XSL テンプレートで作成され、別のテンプレートで定義されたテーブル、テアドなどを使用します。

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

私の好みは、要素に交互のクラスを使用することです。

4

4 に答える 4

39

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 マークアップがよりクリーンになります。また、クライアント側のテーブルの並べ替えやフィルタリングと互換性があります。

于 2009-01-22T17:01:53.813 に答える
4

css3 を使用することもできます。

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

IE9 以降、他のすべてのブラウザでかなり長い間サポートされています。

于 2011-05-01T11:40:40.300 に答える
1

XSL:When を使用し、position 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-22T17:03:54.607 に答える
1

代わりにクラス名だけを変更したい場合があります。変数内で選択して内部値の変更を有効にできる場合です。このようなもの：

<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-04T20:09:07.400 に答える