Question

我有一个表格，列数为＃34;金额为＃34;。如果单元格中的项目是正数，我希望它以绿色着色，如果不是红色。

这可以使用jQuery轻松完成，但我想知道是否有任何使用新CSS3功能的技巧可以帮助我实现这一点而不使用javascript。

这可能吗？

Answer 1

也许您可以安排服务器生成包含值data-*属性的HTML。然后：

<span data-value="-123">-123</span>

[data-value^="-"] {
    color: red;
}

在单词中，＆＃34;如果data-value属性的值以减号开头，则将文本的颜色设置为红色。＆＃34;

另一个想法是使用:invalid伪类。不幸的是，这仅适用于input元素。但是，您可以禁用它以防止输入并设置样式，使其看起来像常规文本。您还必须安排将值放在value元素的input属性中：

<!-- specify a pattern which permits only positive numbers -->
<input type="text" pattern="\\d*" value="-123" disabled>

input:invalid {
  color: red;
}

这些方法都不理想;你可能最终会使用JS。

Answer 2

当您返回表格的数据时，您需要为您的金额列添加一个类，其中任何值都小于0.您可以使用“否定”并给它一种颜色样式：RED;对于所有正值，您可以将金额列TD的默认样式设置为绿色，当浏览器遇到“负”样式时，它会将负值设置为红色。

Answer 3

使用类似的东西：

<style>

.positive
{
background:green;
}

.negative
{
background:red;
}

</style>

<script>

function colorBackground(){

if (document.getElementById('yourid').value < 0){

document.getElementById('yourid').style.bgColor = "red";
}else {
document.getElementById('yourid').style.bgColor = "green";
}
}

</script>

Answer 4

显然，这不能仅使用CSS3完成。

这是我最后使用的jQuery代码：

$( document ).ready(function() {
    $(".amount").each(function() {
      $(this).addClass($(this).text() >= 0 ? "positive" : "negative");
    });
});

如果有人有任何较短的版本，我很乐意拥有它：）

由于

CSS3 - 基于特定条件的颜色项目

4 个答案: