Таблица HTML с чередующимися цветами строк через XSL

Каков самый простой способ чередовать цвета строк в таблице HTML (a.ka. striping). Большинство моих таблиц создаются в шаблонах XSL, таких как: таблица, thead и т.д., Определенные в другом шаблоне.

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

Мое предпочтение заключается в использовании чередующихся классов для элементов.

Ответы

Ответ 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>

С сегодняшними браузерами вы намного лучше используете CSS и tr:nth-child(odd).

Это приводит к меньшему количеству хлопот на стороне XSLT, значительно более высокой разметке HTML и совместимости с сортировкой и фильтрацией на стороне клиента.

Ответ 2

Вы также можете использовать css3.

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

Поддерживается как IE9 в течение некоторого времени всеми другими браузерами.

Ответ 3

Используйте XSL: когда и сравнивайте позицию 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>

РЕДАКТИРОВАТЬ: Получение моего нечетного/даже правильного пути вокруг вздоха

Ответ 4

Можно ли вместо этого изменить только имя класса, когда вы можете выбрать внутри переменной, чтобы изменить ее внутреннее значение. Что-то вроде этого:

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

Привет!