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/edit][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

我相信您可以编写代码，这是一种非常简单的方法:)

我根据两个步骤为你做了一个例子：

  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 回答