Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: JoelBОтветов: 4

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

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

htmlhtml-tablexslt

Ответы

Ответ 1 · рейтинг 38 · Tomalak

Если вы должны создавать жестко закодированные цвета в 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 · рейтинг 4 · Gerben

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

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

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

Ответ 3 · рейтинг 1 · Wolfwyrd

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

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

Ответ 4 · рейтинг 1 · Juan Zamora

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

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

С Уважением!

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы