Делаем каждую вторую строку таблицы другого цвета - JS

Чередование цвета строк таблицы через CSS nth-child. Отличие отсчёта jQuery :even и разметка с отдельными thead и tbody.

Для того, чтобы выделить каждую вторую строку таблицы другим цветом, необходимо прописать в код html следующий код:

<script type="text/javascript">
  jQuery( function($) {
    $('tr:even').css({'background-color' : '#d9d8df'});
  });
</script>
<table align="center">
    <tr>
      <th>СТРОКА</th>
      <th>№</th>
    </tr>
    <tr>
      <td>Строка 1</td>
      <td>1</td>
    </tr>
     <tr>
      <td>Строка 2</td>
      <td>2</td>
    </tr>
      <tr>
      <td>Строка 3</td>
      <td>3</td>
    </tr>
     <tr>
      <td>Строка 4</td>
      <td>4</td>
    </tr>

  </table>

Текстовый образец таблицы. Фрагмент выше выполняется на странице с подключённым jQuery; в статье скрипт не запускается.

СТРОКА №
Строка 1 1
Строка 2 2
Строка 3 3
Строка 4 4

Проверенные источники

developer.mozilla.org, api.jquery.com. Проверено 10 октября 2026 года.

Все материалы раздела «Программирование»Каталог инструментов