通过将第二列中的每个单元格与最后一行中的合作响应单元格进行比较来设置条件格式。
通过将第二列中的每个单元格与最后一行中的合作响应单元格进行比较来设置条件格式。
提问于 2016-04-06 07:14:06
我希望在网页中应用一个条件格式，以便通过比较表中第二列中的单元格和表最后一行对应的单元格来分配三种格式规则(通过CSS类'good‘、'bad’、‘满意者’实现。
请参阅图像中单元格之间比较的详细信息：比较表中单元格的规则
用词：
- 比较细胞(2，2)和细胞(9,3)如果细胞(2，2)<=细胞(9,3)改变细胞(9,3)的背景为绿色(class='good')，如果细胞(2，2)>细胞(9，3)将细胞(9，3)的背景变红(类=‘坏’)，则细胞(2，2)和细胞(9，3)比较细胞(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> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td>39</td><td>4</td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td>32</td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td>7</td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td> </td><td>4</td><td> </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> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td>194</td><td>55</td><td>39</td><td>36</td><td>7</td><td>4</td><td>5</td><td> </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>请帮助我实现我所描述的条件格式。
回答 2
Stack Overflow用户
发布于 2016-04-06 09:19:27
最后，我找到了解决这一问题的办法。非常感谢你的帮助，法比奥。
这个问题是因为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'); }
}
}Stack Overflow用户
发布于 2016-04-06 09:17:27
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";
}
}
}<!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>
你需要这个吗？@peppe1 1我在表中使用了一些演示数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36443993
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号