Question

我有一个表，其中包含包含状态的数据列。两个示例状态将是“已拒绝”和“付费”

我想要做的是将“已拒绝”的文字颜色更改为红色，将“付费”的颜色更改为绿色。

对于具有此状态的单元格，我向td添加了一个类，如：

<td class="status">
    @Html.DisplayFor(modelItem => item.Status)
</td>

所以我可以轻松识别它。

我发现我可以使用以下方法将所有状态的颜色更改为红色：

$('.status').css("color", "red");

我也可以通过以下方式获得第一个的值：

alert($('.status').html());

但是我不确定如何根据文本设置状态颜色。即所有“已接收”设置颜色为红色，所有“付费”设置颜色为绿色。

有人可以告诉我如何实现这个目标吗？

我是否遵循使用jQuery的正确方法或者是否有更好的CSS方式？

Answer 1

这将有效：

$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');

Answer 2

我也可以通过......获得第一个的价值。

使用该选择器可以获得一个集合。并且您对集合中的第一项进行.html()。

您可以遍历所有status单元格以检查状态并更改颜色。

$('.status').each(function() {
  // check text and do styling
});

然而，这不是首选（因为不需要）。它会伤害表现。

您也可以使用jQuery .contains()（http://api.jquery.com/contains-selector/）。

也不是真的需要。而且我认为不是明智的选择。

所以最好的选择（恕我直言）是：

为什么不向单元格添加两个额外的类：status-received和status-paid，因为在渲染单元格时已经知道了单元格的状态。

所以你可以做到：

$('.status-received').css("color", "red");
$('.status-paid').css("color", "red");

或完全删除jQuery（因为我们不再需要它（除非我们要动态更改单元格））并且只是样式这两个类使用CSS。

Answer 3

如果要从数据库打印表格，只需根据结果为td分配一个类。

然后为该类指定背景颜色。

td.paid {
 display:block;
background-color:red;

}

td.recieved {
 display:block;
background-color:green;
}

为什么你首先需要使用javascript？

如果我没有弄错，上面的代码是jQuery，所以如果你使用它，不要忘记添加Lib。

Answer 4

我最近不得不这样做。当发生错误时，我需要将背景颜色更改为红色（好，粉红色），并在一切都很好时将其保持为白色。这是我的代码：

warning_color = "#ffffff";

if (error_happened)
    warning_color = "#ffaaaa";

$("#input_box").css('background-color', warning_color);

Answer 5

$('td.status').each(function() {
  if ($(this).text() == 'Received') {
      $(this).style('color', 'red');
  } // similarly for other statuses
});

Answer 6

$('.status').addClass($(".status").html());

然后你可以有一个.Paid类和一个.Received类，并分别在这些类中设置css。这样，如果您以后想要更改css，它将从javascript中抽象出来。如果需要，您也可以在其他位置使用这些类。