Question

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

查看图像中单元格之间的比较细节： rule to compare cells in table

用文字说明：

将细胞（2,2）与细胞（9,3）进行比较 if cell（2,2）＆lt; = cell（9,3）将cell（9,3）的背景改为green（class ='good'），IF cell（2,2）＆gt; cell（9,3）将单元格（9,3）的背景更改为红色（class ='bad'）将细胞（2,2）与细胞（9,3）进行比较
将细胞（3,2）与细胞（9,4）进行比较
将细胞（4,2）与细胞（9,5）进行比较 ..until
将细胞（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

最后，我找到了解决方案。非常感谢你的帮助，Fabio。

问题是由于Javascript计算的行数和列从0开始（=表的第一行或第一列）。我的循环指向不存在的行，即第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'); }
          }
      }

Answer 2

你不工作是什么意思？

您是否需要在示例中使用for启动i = 3？

为什么不申报像

这样的网格变量

var grid = document.getElementById('GridView1');

使调试更容易？

可能你的选择器不好，'#id'对jQuery很好，document.getElementById只想要'id'作为参数

我现在看到你正在做的其他错误：

你要比较2个html元素，而不是这样做：

var grid = document.getElementById('GridView1');
if (grid.rows[i].cells[2].innerText < grid.rows[9].cells[i + 1].innerText) {
    gridrows[9].cells[i + 1].classList.add('bad');
}

并且，更改类的一个好方法是使用html元素的classList属性

Answer 3

＆＃13;

function x() {
    var tab = document.getElementById('GridView1');
    console.log("hi ", document.getElementById('GridView1'));
    var row = tab.getElementsByTagName('tr');
    for (i = 1; i < 8; i++) {
        console.log("hllo ", Number(row[i].getElementsByTagName('td')[1].innerHTML));
        console.log("hllo1 ", Number(row[8].getElementsByTagName('td')[i + 1].innerHTML));

        if (Number(row[i].getElementsByTagName('td')[1].innerHTML) <= Number(row[8].getElementsByTagName('td')[i + 1].innerHTML)) {
            console.log("djfgjg ", row[i].getElementsByTagName('td')[9]);
            row[i].getElementsByTagName('td')[9].style.backgroundColor = "green";
        } else {
            row[i].getElementsByTagName('td')[9].style.backgroundColor = "red";
        }

    }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />



<body onload="x()">
    <table id="GridView1">
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
            <th>e</th>
            <th>f</th>
            <th>g</th>
            <th>h</th>
            <th>i</th>
            <th>j</th>
        </tr>
        <tr>
            <td>A</td>
            <td>134</td>
            <td>134</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>134</td>
        </tr>
        <tr>
            <td>B</td>
            <td>55</td>
            <td>60</td>
            <td>65</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>115</td>
        </tr>
        <tr>
            <td>C</td>
            <td>45</td>
            <td></td>
            <td></td>
            <td>39</td>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td>43</td>
        </tr>
        <tr>
            <td>D</td>
            <td>32</td>
            <td></td>
            <td></td>
            <td></td>
            <td>32</td>
            <td></td>
            <td></td>
            <td></td>
            <td>32</td>
        </tr>
        <tr>
            <td>E</td>
            <td>7</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>7</td>
            <td></td>
            <td></td>
            <td>7</td>
        </tr>
        <tr>
            <td>F</td>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>4</td>
            <td></td>
            <td>4</td>
        </tr>
        <tr>
            <td>G</td>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>H</td>
            <td></td>
            <td>194</td>
            <td>55</td>
            <td>39</td>
            <td>36</td>
            <td>7</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

＆＃13;

你需要这个吗？@ peppe1我已经使用了一些演示数据。

通过将第二列中的每个单元格与最后一行中的相应单元格进行比较来进行条件格式化

3 个答案: