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

概要:
テーブル<table />タグに td-[追加したい行数]-[追加したい列数]-[追加したいクラス名] のクラスを設定し、
テーブルの任意の<td />にclassを追加する(table > tbody > td.addClass)

サンプル

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

注釈

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


0 a b
1 c d
2 e f

reStructuredText (reST)

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

   +-+-+-+
   |0|a|b|
   +=+=+=+
   |1|c|d|
   +-+-+-+
   |2|e|f|
   +-+-+-+

htmlイメージ

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

JavaScript (jQuery)

$(function() {
  // table > tbody > td.addClass([ClassName])
  // td-[Row]-[Col]-[ClassName]
  $('table[class*="td-"]').each(function() {
    var trs = $(this).children('tbody').children('tr');
    // クラス値をスペースで分割
    $($(this).attr('class').replace(/[\t\r\n\s]+/g,' ').replace(/(^\s+|\s+$)/g,'').split(' ')).each(function() {
      // 'td-' に前方一致する値
      if (this.lastIndexOf('td-', 0) == 0) { //< startsWith
        // 'td-' 以降の文字列を'-'で分割
        var aryClassNameSplit = this.substr(new String('td-').length).split('-');
        if (2 < aryClassNameSplit.length) {
          var row = aryClassNameSplit.shift();
          var col = aryClassNameSplit.shift();
          var strClassName = aryClassNameSplit.join('-');
          if ($.isNumeric(row) && $.isNumeric(col) && strClassName !== '') {
            $($(trs[ row ]).children('td')[ col ]).addClass(strClassName);
          }
        }
      }
    });
  });
});

注釈

複数のクラスを配列で取得したい場合のjQuery拡張
jQuery.fn.extend({
    getClasses: function() {
        return $(this).attr('class').replace(/[\t\r\n\s]+/g,' ').replace(/(^\s+|\s+$)/g,'').split(' ');
    }
});