Javascript表根据值绘制行

Question

我得到了下表（例如，该表是动态的，可能会更改其值）：

.negative {
          background-color: red;
          font-weight: bold;
        }
.positive {
          background-color: green;
          font-weight: bold;
        }


<table border="1" align="center" id="testtable1">

<tr>
 <th>#</th>
 <th>Positive</th>
 <th>Negative</th>
</tr>
    <tr>
        <td>1</td>
        <td class="odd">7.4</td>
        <td class="even">4.4</td>
    </tr>
    <tr>
        <td>2</td>
        <td class="odd">1</td>
        <td class="even">5.4</td>
    </tr>
    <tr>
        <td>3</td>
        <td class="odd">2</td>
        <td class="even">2.4</td>
    </tr>
</table>

我需要从左列和右列中找到最大值并将每个最大值的整个 1 行绘制为正（绿色背景）或负（红色）颜色，所以第 1 行应该全是绿色，第 # 行2 应该是红色的。第 3 行应为白色（不应绘制最大值）。如果正最大值和负最大值都在同一行上，则该行应涂成绿色，然后应找到第二个负最大值并将其涂成红色。到目前为止，我已经得到了以下 JS 代码：

function MakeColors() {
 table = document.getElementById("testtable1");
 TRs = document.getElementsByTagName('tr');
 TDs = document.getElementsByTagName('td')

 var max_val_pos = 0;
 var max_val_neg = 0;
 var max_val_neg2 = 0;
 for (var i = 0; i < TDs.length; i++) {

   var temp = TDs[i];
   var tdval = parseFloat(temp.firstChild.nodeValue);
   if(max_val_pos < tdval && temp.className == "odd") {
     max_val_pos = tdval;
   }
   if(max_val_neg < tdval && temp.className == "even") {
     max_val_neg = tdval;
   }
   if(max_val_neg2 < tdval && 
     tdval != max_val_neg && 
     temp.className == "even"){
    max_val_neg2 = tdval;  
  } 
}

for (var i = 0, row; row = table.rows[i]; i++) {
 for (var j = 0, col; col = row.cells[j]; j++)  {
  if (parseFloat(col.firstChild.nodeValue) == max_val_pos)   {row.className = "positive";}
 if (parseFloat(col.firstChild.nodeValue) == max_val_neg &&    row.className !="positive") {row.className = "negative";}else if(parseFloat(col.firstChild.nodeValue) == max_val_neg2){row.className = "negative";

      }
     }  
   }
 }

MakeColors();

问题是如果第一个负最大值发生变化，我无法找到负列的下一个最接近的最大值。一般来说，我可以为一种情况找到解决方案，但是当数据更改时，结果会中断并且我绘制错误的行。欢迎任何如何解决问题的想法。谢谢。

Answer 1

正如@mike510a 所说，您每次更改数据时都可以再次调用makeColors()，但您必须进行一些更正：

1. 您需要重置既不是最大值也不是最小值的行。

2. 您需要考虑如果两个值相同会发生什么。如果有两个最大值，你们都涂成绿色吗？如果最小值和最大值在同一行，则将该行绘制为绿色，但如果有另一行具有相同的最小值，那么您可能希望将该行绘制为红色，而不是算法找到的第二个最小值的行。

所以最简单的方法是先绘制最大行数，然后绘制最小行数：

1. 查找最大值
2. 绘制最大行并重置其他行 (.className = "")
3. 查找最小值，忽略已绘制的行
4. 绘制最小行，同时忽略已绘制的行