テーブルの任意の行をハイライト(td.addClass)

概要:
<table />タグに tr-[(追加したい行数1)-(追加したい行数2)...]-(追加したいクラス名) のクラスを設定し、
テーブルの任意の<tr />にclassを追加する(table > tbody > tr.addClass)
(.. code-block:::emphasize-lines: 的なことがしたい。)

サンプル

概要:二行目と三行目の<tr />タグに highlight クラス(_static/pygments.css)を設定して、ハイライト表示

注釈

クラス名の highlight は、任意の名前を指定可能


0 a b
1 c d
2 e f
3 g h
4 i j

reStructuredText (reST)

概要:行数は0が一行目。二行目と三行目をハイライトするために1と2を指定している。
.. table::
   :class: tr-1-2-highlight

   +-+-+-+
   |0|a|b|
   +=+=+=+
   |1|c|d|
   +-+-+-+
   |2|e|f|
   +-+-+-+
   |3|g|h|
   +-+-+-+
   |4|i|j|
   +-+-+-+

htmlイメージ

<table class="tr-1-2-highlight">
<thead>
  <tr>
    <th>0</th>
    <th>a</th>
    <th>b</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr class="highlight"><!-- class="highlight" は JavaScript で付与 -->
    <td>2</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr class="highlight"><!-- class="highlight" は JavaScript で付与 -->
    <td>3</td>
    <td>g</td>
    <td>h</td>
  </tr>
  <tr>
    <td>4</td>
    <td>i</td>
    <td>j</td>
  </tr>
</tbody>
</table>

JavaScript (jQuery)

$(function() {
  // table > tbody > tr.addClass([ClassName])
  // tr-[(Row1)-(Row2)...]-[ClassName]
  $('table[class*="tr-"]').each(function() {
    var trs = $(this).children('tbody').children('tr');
    // クラス値をスペースで分割
    $($(this).attr('class').split(' ')).each(function() {
      // 'tr-' に前方一致する値
      if (this.lastIndexOf('tr-', 0) == 0) { //< startsWith
        // 'tr-' 以降の文字列を'-'で分割
        var aryClassNameSplit = this.substr(new String('tr-').length).split('-');
        var aryRows = new Array();
        while (aryClassNameSplit.length) {
          var row = aryClassNameSplit.shift();
          if ($.isNumeric(row)) {
            // 整数の場合、行数
            aryRows.push(new Number(row));
          } else {
            // 整数以外の場合、残りの文字列を全てクラス値とする
            if (aryClassNameSplit.length) {
              row += '-' + aryClassNameSplit.join('-');
            }
            for (var i = 0; i < aryRows.length; ++i) {
              // 行(<tr />)に、クラス値を設定
              $(trs[ aryRows[i] ]).addClass(row);
            }
            break;
          }
        }
      }
    });
  });
});