JavaScript如何检查<td>元素的背景颜色是否为特定颜色？

Question

我刚开始学习JavaScript和jQuery。

根据表格单元格的值，我正在设置其backgroundColor。

 $("td.ms-vb2").filter(function(index){return $(this).text() === "Yes";}).css("backgroundColor", "#81F79F");
 $("td.ms-vb2").filter(function(index){return $(this).text() === "No";}).css("backgroundColor", "#FE642E");

请问我应该如何编写if-else语句，其中当颜色为#81F79F时进行提示，而当颜色为#FE642E时进行另一个提示？

或者说，如果单元格中的值为Yes，则进行提示，而当单元格中的值为No时，进行另一个提示。

非常感谢！

- SharePointDummy

---

你想让这些警报何时运行？它们会循环运行吗？这不是很烦人吗？ - DontVoteMeDown

Answer 1

从元素中提取颜色，然后按照您的意愿进行检查。由于jQuery似乎将background-color返回为rgb颜色，因此您需要将其转换为十六进制，或者根据等效的rgb进行检查。

如果您想要一个将颜色值转换为函数，请查看question。

var color = $('td.ms-vb2').css('background-color');
if (color == 'rgb(129,247,159)')
    alert('#81F79F');
else if (color == 'rgb(254,100,46)')
    alert('#FE642E');

或者，您可以编写类似的代码来检查文本（在这种情况下，这可能是更简单的解决方案）

var value = $('td.ms-vb2').text();
alert(value == "Yes" ? "Yes!" : "No...");

- Andrew Brooke

---

你能展示如何获取十六进制的背景颜色吗？ - DontVoteMeDown

啊，我刚意识到它返回的是 RGB 值，让我更新我的答案。 - Andrew Brooke

Answer 2

你最好的选择可能是如果是 yes 就向 td 添加一个 class，或者如果是 no 就添加另一个 class。然后测试类的存在性。

例如，添加类 affirmative 或 negative。

然后在 CSS 中为 affirmative 或 negative 定义样式，并在那里声明背景颜色。这样，所有你的 JS 只需要改变类即可。

- James Holland

Answer 3

你可以使用each()函数来完成所有需要的操作：

设置单元格背景颜色：

$('td.ms-vb2').each(function(){
    var cell = $(this)
    if (cell.text() == "Yes")
        cell.css('background-color', '#81F79F');
    else if (cell.text() == "No")
        cell.css('background-color', '#FE642E');        
});

显示弹窗：

$('td.ms-vb2').each(function(){
    var color = $(this).css('background-color');
    if (color == '#81F79F')
        alert('#81F79F');
    else alert('another color');
});

- Ragnar