javascript - 通过将第二列中的每个单元格与其最后一行中的对应单元格进行比较来进行条件格式设置

Question

我希望在网页中应用条件格式，以便通过将表格中第二列的单元格与单元格进行比较来分配三个格式规则(通过 CSS 类“好”、“坏”、“满意”实现)对应于表格的最后一行。

查看图像中细胞之间的比较细节: rule to compare cells in table

in words:

• 比较单元格(2,2)与单元格(9,3)if cell(2,2)<= cell(9,3) 将单元格 (9,3) 的背景更改为绿色(class='good')，IF cell(2,2)>cell(9,3) 更改背景单元格(9,3)变为红色(class='bad') 比较单元格(2,2)与单元格(9,3)
• 比较单元格(3,2)与单元格(9,4)
• 比较单元格(4,2)与单元格(9,5)..直到
• 比较单元格(8,2)与单元格(9,9)

我尝试了这个 JavaScript，但它不起作用:

  function realizat() {
                for (i = 2; i < 9; i++) {
                    if (document.getElementById('GridView1').rows[i].cells[2] < document.getElementById('GridView1').rows[9].cells[i + 1]) {
                        document.getElementById('GridView1').rows[9].cells[i + 1].addClass = ('bad')
                    }
}

如果有意义的话，html页面中表“GridView1”的定义是

<table class="containerComisionare" cellspacing="0" cellpadding="1" id="GridView1" style="width:400px;border-collapse:collapse;">
    <tr style="color:Black;background-color:White;border-style:None;font-family:Segoe UI;font-size:8pt;font-weight:normal;">
        <th scope="col">Ziua Planificare</th><th scope="col">Target (Soll)</th><th scope="col">Realizat (Ist) Vineri</th><th scope="col">Realizat (Ist) Sambata</th><th scope="col">Realizat (Ist) Duminica</th><th scope="col">Realizat (Ist) Luni</th><th scope="col">Realizat (Ist) Marti</th><th scope="col">Realizat (Ist) Miercuri</th><th scope="col">Realizat (Ist) Joi</th><th scope="col">Realizat (Ist) Total</th>
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Vineri</td><td>134</td><td>134</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>134</td>
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Sambata</td><td>55</td><td>60</td><td>55</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>115</td>
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Duminica</td><td>45</td><td>&nbsp;</td><td>&nbsp;</td><td>39</td><td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>43</td>
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Luni</td><td>32</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>32</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>32</td>
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Marti</td><td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>7</td>
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Miercuri</td><td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>4</td><td>&nbsp;</td><td>4</td>
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Joi</td><td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>5</td><td>5</td>
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;">
        <td>Total</td><td>&nbsp;</td><td>194</td><td>55</td><td>39</td><td>36</td><td>7</td><td>4</td><td>5</td><td>&nbsp;</td>
    </tr>
</table>

html 表格来自 ASP GridView 控件

  <asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" CellPadding="1" GridLines="None" Width="400px" CssClass="containerComisionare">  
        <AlternatingRowStyle BackColor="white"/>
        <HeaderStyle BackColor="White" Font-Names="Segoe UI" Font-Size="8pt" ForeColor="Black" Font-Bold="False" BorderStyle="None" />
        <RowStyle Font-Names="Segoe UI" Font-Size="8pt" HorizontalAlign="Center"  BorderStyle="Solid" BorderWidth="1px"/>
    </asp:GridView>

请帮助我实现我所描述的条件格式。

Answer 1

终于，我找到了解决方案。非常感谢您的帮助，法比奥。

the issue was due to the fact that Javascript counts the rows and columns starting with 0 (=first row or column of tables). My loop was pointing to the non-existent row, namely row number 9

带有分辨率的完整代码在这里:

 function realizat() {
          alert("Hello, hereby I verify that I am executed");
          for (i = 1; i < 9; i++) {
              var grid = document.getElementById('GridView1');
              if (grid.rows[i].cells[1].innerText < grid.rows[8].cells[i + 1].innerText) {
                  grid.rows[8].cells[i + 1].classList.add('good');
              } else { grid.rows[8].cells[i + 1].classList.add('bad'); }
          }
      }