HTMLのテーブルのセルの値によって背景の色を動的に変える方法（最大値、第2位、第3位など）

いろいろ探しても案外なかったので作成。あんまり需要がないんですかね？DataTables | Table plug-in for jQueryに標準であればうれしかったんですけども。

目的

HTMLのテーブル（tableタグ）において、特定の列について値の順位（最大値、2番めに大きな値、3番めに大きな値・・・）によって、セルの背景の色を動的に変える方法を考える。

つまりは、下記画像のような、セルの値によって、1位（一番大きい値）は赤、2位はオレンジ、3位はブルー、4位はパープルという色を自動でつけたいということ。

なお、セルに数字以外の値が入っていても対応することを目指す。165.4cmのように単位が入っていてもOKにする。「不明」などの文字列や空白は無視するものとする。

Javascriptのアルゴリズム

対象となる列のtdに特定のclassをつける。
classオブジェクトを取得。
javascriptの配列に入れる
配列内の最大値を取得（第1位の値）
配列内から最大値を削除して配列を更新
配列内の最大値を取得（第2位の値）
配列内から最大値を削除して配列を更新
配列内の最大値を取得（第3位の値）
配列内から最大値を削除して配列を更新
配列内の最大値を取得（第4位の値）
classオブジェクトをループして、各値と一致していたらそのオブジェクトにCSS（色）を追加

ソースコードと使い方

Javascriptの関数は以下の通り。jQuery使用。使い方は、対象のtdにclassを付けて、setcolor(class名)する。

    function setcolor(classname) {
      var rank = $(classname);

      var arr = [];
      $.each(rank, function(_, v) {
        var num = parseFloat($(v).text());
        if (num) {
          arr.push(num);
        }
      });

      // 一番大きい
      var first = Math.max.apply(Math, arr);

      // 一番大きいのを配列から削除
      arr = arr.filter(function(x) {
        return x != first
      });

      // 2番目に大きい
      var second = Math.max.apply(Math, arr);

      // 2番大きいのを配列から削除
      arr = arr.filter(function(x) {
        return x != second
      });

      // 3番目に大きい
      var third = Math.max.apply(Math, arr);

      // 3番大きいのを配列から削除
      arr = arr.filter(function(x) {
        return x != third
      });

      // 4番目に大きい
      var fourth = Math.max.apply(Math, arr);

      // CSSをつける
      $.each(rank, function(_, v) {
        var num = parseFloat($(v).text());
        if (num == first) $(v).css('background-color', '#FFC0CB');
        if (num == second) $(v).css('background-color', '#FFCC99');
        if (num == third) $(v).css('background-color', '#C0F0FF');
        if (num == fourth) $(v).css('background-color', '#E6E6FA');
      });
    }

parseFloatで、例えば156.4cmとかあっても、156.4というfloat型になる。parseFloatで数字にならなければ、配列に入れないものとする。

書く人が書けば、もっときれいでスッキリしたコードになるのだと思いますが、とりあえずわかりやすさを大事に。

実際の動きを確認（jsfiddle）

下記のとおりです。同順位、空白、数字以外、数字＋文字を確認してください。