HTML-таблица с чередованием цветов строк через XSL

Каков самый простой способ чередовать цвета строк в таблице 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>

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


html html-table xslt
person JoelB    schedule 22.01.2009    source источник

Ответы (4)


arrow_upward
38
arrow_downward

Если вы должны создавать жестко закодированные цвета в 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-разметке и совместимости с сортировкой и фильтрацией таблиц на стороне клиента.

person Tomalak    schedule 22.01.2009

arrow_upward
4
arrow_downward

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

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

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

person Gerben    schedule 01.05.2011

arrow_upward
1
arrow_downward

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

РЕДАКТИРОВАТЬ: Как понять, что я нечет/чет правильно вздыхаю

person Wolfwyrd    schedule 22.01.2009

arrow_upward
1
arrow_downward

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

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

С Уважением!

person Juan Zamora    schedule 04.11.2010
comment
В своем коде я пытался изменить значение переменной xsl и сделал что-то вроде этого. В конце концов я решил, что меня также можно использовать для решения такой четно-нечетной итерации. Я знаю, это решают мужчины, но это немного другой подход к приготовлению одного и того же. Допустим, я хочу больше сотрудничать, а вы? - person Juan Zamora; 05.11.2010