我怎样才能制作动态色彩？

Question

我有这样的HTML：

$(function(){ // dom ready
    $('tr').each(function() {
       var num = $(this).find('td:nth-child(1)').text();
       
       var color = /* I want to make a red-color based on the num */
       
       $(this).css('background-color', color);
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
        <td>760</td>
        <td>John</td>
        </tr>
        <tr>
        <td>532</td>
        <td>Peter</td>
        </tr>
        <tr>
        <td>201</td>
        <td>Martin</td>
        </tr>
        <tr>
        <td>12</td>
        <td>Barman</td>
        </tr>
    </tbody>
</table>

正如我在上面的代码中所评论的，我需要根据数字创建红色颜色。我的意思是更大的数字应该拥有更深的红色。我怎么能这样做？

注意：最深红色应为#ff0000，而不是更多。

最终结果应该是这样的：（当然是向下）

Answer 1

喜欢这个吗？

＆＃13;

＆＃13;

var max = 1000;

$(function(){ // dom ready
    $('tr').each(function() {
       var num = Number($(this).find('td:nth-child(1)').text());
       var gb = Math.floor((max - num) * 255 / max);
       var color = "rgb(255, " + gb + ", " + gb +")";
       
       $(this).css('background-color', color);
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
        <td>760</td>
        <td>John</td>
        </tr>
        <tr>
        <td>532</td>
        <td>Peter</td>
        </tr>
        <tr>
        <td>201</td>
        <td>Martin</td>
        </tr>
        <tr>
        <td>12</td>
        <td>Barman</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;