Javascript表根据值绘制行

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

。否定{
背景色：红色；
字体大小：粗体；
}
.肯定的{
背景颜色：绿色；
字体大小：粗体；
}
#
肯定的
消极的
1.
7.4
4.4
2.
1.
5.4
3.
2.
2.4

我需要从左列和右列中找到最大值，并将每个最大值的整行绘制为正（绿色背景）或负（红色），因此第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();

函数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；
对于（变量i=0；i

---

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

如@mike510a所述，每次更改数据时，您可以再次调用

makeColors（）

，但您必须进行一些更正：

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

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

因此，最简单的方法是首先绘制最大行，然后绘制最小行：

找到max

绘制最大行并重置其他行（

.className=”“

）

查找最小值，忽略已绘制的行

绘制最小行，同时忽略已绘制的行

---

每次更改数据时再次调用

makeColors（）

，这实际上是问题所在。每次调用makeColors（），它可能会根据表格内容生成正确或不正确的结果。请描述在这种情况下所需的结果：哪些方块显示不正确？它们是错误的颜色还是错误的数字？很抱歉，这个解释让人困惑。您需要以列表的形式（在工具栏上；左起第8个图标）清楚地定义所需的结果，以模拟红色使用

（第4个图标），绿色使用代码括号

{}

（第5个图标）。当说最大值…行的最大值或与表中所有单元格相比的最大值时？对于mike510a FIDLE，第三行为绿色，正值为21.5，这是正确的，第二行为红色，值为5.4，这是错误的。在这种情况下，红色行应为第一行，其值为9.4，这是负值列中15.4之后的第二个负值。您也可以尝试使用不同值的代码，以查看其工作情况和失败情况。因此，我是否需要重构代码，以便在找到最大值后将行绘制为绿色，然后仅在找到最大负值后将行绘制为红色？现在我有2个循环-在第一个循环中，我找到最大正和负（如果没有绘制的行，这就是问题所在），然后我绘制它们。是的，你可以做4个循环，每个点对应一个循环。是的，这可以更有效地完成，但我怀疑这是否重要。

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();