テーブルの偶数行と奇数行の色分け

概要:偶数行(even)と奇数行(odd)の色分け

サンプル

a b
c d
e f
g h
i j

reStructuredText (reST)

.. table::
   :class: tr-odd-even

   +-+-+
   |a|b|
   +=+=+
   |c|d|
   +-+-+
   |e|f|
   +-+-+
   |g|h|
   +-+-+
   |i|j|
   +-+-+

.. only:: html or singlehtml

   .. raw:: html

      <!-- 直接rstファイルに埋め込む場合
      <script type="text/javascript">
      //<![CDATA[
      $(function() {
         $("table.tr-odd-even > tbody > tr:nth-child(even)").each(function() { $(this).css({ background: "#f9ffeb" }); });
         $("table.tr-odd-even > tbody > tr:nth-child(odd)").each(function() { $(this).css({ background: "#fff" }); });
      });
      //]]>
      </script>
      -->

Cascading Style Sheets (CSS)

table > tbody > tr.tr-even { background-color: #f9ffeb; }
table > tbody > tr.tr-odd { background-color: #fff; }

JavaScript (jQuery)

$(function() {
  $('table.tr-odd-even > tbody > tr:nth-child(even)').each(function() { $(this).addClass('tr-even'); });
  $('table.tr-odd-even > tbody > tr:nth-child(odd)').each(function() { $(this).addClass('tr-odd'); });
});