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

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

14 голосов
/ 22 января 2009

Какой самый простой способ чередовать цвета строк в таблице HTML (например, чередование). Большинство моих таблиц создаются в шаблонах 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>

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

Ответы [ 4 ]

37 голосов
/ 22 января 2009

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

4 голосов
/ 01 мая 2011

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

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

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

1 голос
/ 04 ноября 2010

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

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

Привет!

1 голос
/ 22 января 2009

Используйте 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>

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

...