XMLとXSLTを使用したZebraストライプテーブル

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 n番目の子オプションを使用することはできません。なぜなら、これはxslファイル内の他のすべてのテーブル設定に影響するためです。私は様々なテーブルに異なるスタイルを適用できる必要があるので、ストライピングのメソッドを取得するときに、そのメソッドを別のテンプレートに適用します。

誰かがcssスタイルシートメソッドを個々のxslテンプレートに限定する方法を知っていない限り、それは素晴らしいだろうが、私はこれまでインターネット上でこれを行うことができることを示していない。

Answer 1

のようにCSSを使用してみてください：更新

tr:nth-child(even) { background: #ccc } 
tr:nth-child(odd) { background: #fff } 

：here

Answer 2

あなたのアプローチからベース

<xsl:for-each select="chapter/section/table-c/tr">  
    <xsl:if test="(position() mod 2) != 1"> 
    <xsl:attribute style="background-color:blue">make_blue</xsl:attribute> 
     <tr style="make_blue">    
     <xsl:apply-templates/> 
     </tr> 
</xsl:if> 
<xsl:for-each> 

コードだけで、基本的には正しいです：申し訳ありませんが、多分試みるが、ことを逃しました<xsl:if>の位置が間違っています。

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

あなたは

をお持ちの場合： <xsl:if>とそれに属し <xsl:attribute>が <tr>出力要素の下に置くことを持っているので、あなたは、あなたが出力に発生する毎秒 <tr>に属性を適用する必要があります

<xsl:for-each select="tr"> 
    <xsl:if test="position() mod 2 = 1"> 
     <tr> 
    ... 
     </tr> 
    </xsl:if> 
<xsl:for-each> 

元の<tr>要素に一種のフィルタ機能があります。ソース文書から毎秒<tr>が処理され、結果ドキュメントに入れられます。これは明らかにあなたが望むものではありません。結果ドキュメントにすべてのソース<tr>を置き、毎秒<tr>に属性を追加する必要があります。そのため、<xsl:if>を<tr>以下に移動する必要があります。

Answer 3

OK、私は勝利の答えを見つけました。

<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の作成者は、if/thenまたはif/else-if/elseをxsl：ifに含めなかった。あなたがそのタイプの機能を望むなら、あなたは彼らが思いついたものを選択する必要があります。