根据它的值更改Cell背景颜色

Question

这与HTML编码有关。我将通过从SQL表中获取数据来准备报告。我为此开发了一个代码并且运行良好。但是为了增加用户体验，我想根据单元格值更改单元格背景颜色（而不是行）。在下面的代码中，“状态”列将具有值Completed \ In Progress \ Error \ Unknown。基于这些值，我想将单元格背景颜色更改为绿色\橙色\红色\灰色。

set nocount on 
DECLARE @Style NVARCHAR(MAX)= '';
DECLARE @tableHTML NVARCHAR(MAX)= '';
DECLARE @Table NVARCHAR(MAX) = N''

SET @Style += +N'<style type="text/css">' + N'.tg  {border-collapse:collapse;border-spacing:10px;border-color:#aaa;}'
+ N'.tg td{font-family:Arial, sans-serif;font-size:14px;padding:5px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;}' 
+N'tr:nth-child(odd) {background-color:#546415;}
tr:nth-child(even) {background-color:#fff;}'
+ N'.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:6px 6px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#614596;}'
+ N'.tg .tg-9ajh{font-weight:bold;background-color:#614596}' + N'.tg .tg-hgcj{font-weight:bold;text-align:center}'
+ N'</style>';

SELECT @Table = @Table +
'<td>' + ProductID + '</td>' +
'<td>' + ProductName+ '</td>' +
'<td>' + OrderedBy+ '</td>' +
'<td align=center>' + Status+ '</td>' +
'<td>' + Location+ '</td>' +
'</tr>'
FROM DBTable

SET @tableHTML += @Style + @tableHTML + N'<H2><font color="DIMGRAY">Status Report'+'</H2>' 
+ N'<table class="tg">' 
+ N'<tr bgcolor=#ccc>' 
+ N'<th class="tg-hgcj" colspan="1">ProductID</th>' 
+ N'<th class="tg-hgcj" colspan="1">ProductName</th>'
+ N'<th class="tg-hgcj" colspan="1">OrderedBy</th>'
+ N'<th class="tg-hgcj" colspan="1">Status</th>'
+ N'<th class="tg-hgcj" colspan="1" >Location</th>'

谷歌搜索后，我找到了类似下面的东西。但由于我是html的初学者，我无法将下面的代码集成到上面来完成我的任务。有人可以帮助我如何组合这些代码，以便我得到如下所示的数据输出。

var table = document.getElementById('tableID');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

   for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].className = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
       cells[i].className = 'green';
    }
}

预期产出：