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()，但是您必须进行一些更正：

您需要重置既不是max也不是min的行。
如果两个值相同，您需要考虑会发生什么。如果有两个最大值，你们都涂成绿色吗？如果min和max在同一行，那么你将行绘制为绿色，但如果有另一行具有相同的最小值，那么你可能想要将此行绘制为红色而不是那些具有算法找到的第2个min的行。

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

查找最大值
绘制最大行并重置其他行（.className = ""）
找到min，忽略已经绘制的行
绘制最小行，同时忽略已绘制的行

Javascript表根据值绘制行

1 个答案: