Question

我有一组带有数字的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/

有人免费知道这样的解决方案吗？

Answer 1

看看HeatColor。它应该让你做你想做的和免费的。

Answer 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个值，但如果您有更多的值，只需添加更多级别，或者对值进行排序并匹配预定义颜色列表。

Answer 3

只需查看http://geertdedeckere.be/shop/graphup/，但它不是免费的。

使用Javascript / Jquery根据数字为单元格HTML表格着色

3 个答案: