2

次のようなスタイルの数字を持つ一連の html テーブルがあります。

  <table border="1">
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>0:00 - 8:00</td>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <td></td>
    <td>8:00 - 18:00</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td></td>
    <td>18:00 - 0:00</td>
    <td>80</td>
    <td>60</td>
  </tr>
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>0:00 - 8:00</td>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <td></td>
    <td>8:00 - 18:00</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td></td>
    <td>18:00 - 0:00</td>
    <td>80</td>
    <td>60</td>
  </tr>
  </table>

[jsbin.com/evakac/2/編集][1]

この表のセルに色を付けたい: 同じ列の他のセルと比較してセルの 1 つの数値が低い場合、色は緑にする必要があります。数値が高い場合は、より強い色になるはずです。

jquery datatables ( http://www.datatables.net/ )のようなプラグインがあることは知っていますが、十分なプラグインは見つかりませんでした。

私を助けることができるjavascript / javascriptプラグインはありますか? 私は jQuery ベースのソリューションを好みます。

更新:これを行うことができるプラグインは次のとおりです。

http://geertdedeckere.be/shop/graphup/

このような解決策を無料で知っている人はいますか？

4

3 に答える 3

3

HeatColorをご覧ください。それはあなたがやりたいことを自由にできるようにするべきです。

于 2013-03-16T15:54:26.557 に答える
3

これは非常に簡単な方法でコーディングできると思います:)

2つのステップに基づいて例を作成しました：

  1. 値を調査し、より大きな値とより低い値を計算します
  2. 結果に基づいてセルをペイントします

コードを見てください

 var result = new Array();

    // calculate 
    $('#source tr').each(function () {
        var id = $(this).attr('id');
        result[id] = new Array();
        result[id]['bigger'] = -1;
        result[id]['smaller'] = 99999999;

        $(this).find('td').each(function () {

            if ($(this).attr('class') === 'data') {
                var n = Number($(this).text());

                if (n > result[id]['bigger']) {
                    result[id]['bigger'] = n;
                }

                if (n < result[id]['smaller']) {
                    result[id]['smaller'] = n;
                }
            }

        })
    });

    // add some colors
    $('#source tr').each(function () {
        var id = $(this).attr('id');

        $(this).find('td').each(function () {

            if ($(this).attr('class') === 'data') {
                var n = Number($(this).text());

                if (n == result[id]['bigger']) {
                    $(this).css("background", "#CC0000");
                }

                if (n == result[id]['smaller']) {
                    $(this).css("background", "#00CC00");
                }
            }

        })
    });

完全な例はhttp://jsfiddle.net/kSxTA/ にあります。これは 2 つの値しかない非常に単純な実装ですが、値がさらにある場合はレベルを追加するか、値を並べ替えて事前定義された色のリストに一致させます。

于 2013-03-16T15:59:57.360 に答える
2

http://geertdedeckere.be/shop/graphup/をご覧ください。ただし、無料ではありません。

于 2013-03-16T15:29:35.520 に答える