基于文本的jQuery更改表单元格文本颜色。

I have a table which has columns of data that contain status. Two example statuses would be "Rejected" and "Paid"

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

What I'm wanting to do is changed the text color of the "Rejected" to red and the color of the "Paid" to green.

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

For the cells that have this status I added a classs to the td like:

对于具有这种状态的单元格，我在td中添加了一个classs:

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

So I can easily identify it.

所以我很容易辨认出来。

I found I could change the color of all the statuses to Red using:

我发现我可以将所有状态的颜色改为红色:

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

Also I could get the value of the first one by:

我也可以通过:

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

However I'm unsure how to set a status color based on its text. ie for all "Received" set color to red and for all "Paid" set color to green.

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

Can somebody enlighten me on how to achieve this?

有人能告诉我如何实现这一目标吗?

Am I even following the right approach using jQuery or is there a better css way?

我是否使用jQuery遵循了正确的方法，还是有更好的css方法?

6 个解决方案

#1

This will work:

这将工作:

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

http://jsfiddle.net/MMEhc/

#2

Also I could get the value of the first one by...

我还可以通过…

With that selector you get a collection. And you do .html() on the first item in the collection.

有了这个选择器，就得到了一个集合。在集合的第一个项目上使用。html()。

You could loop through all status cells to check the status and change the color.

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

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

However this is not preferred (cause it is not needed). And it hurts performance.

然而，这是不可取的(因为它不需要)。和它会对性能产生影响。

You could also use jQuery .contains() for this ( http://api.jquery.com/contains-selector/ ).

您还可以为此使用jQuery .contains()()。

Also not really needed. And I think not the best option performance wise.

也不是必要的。我认为这不是最好的选择。

So the best option (IMHO) is:

所以最好的选择是:

Why don't you just add two extra classes to the cells: status-received and status-paid since you already know the status of the cells while rendering them.

为什么不向单元格中添加两个额外的类:状态接收和状态支付，因为您已经知道单元格的状态，同时呈现它们。

So you just could do:

所以你可以这样做:

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

Or drop the jQuery entirely (since we don't need it any more (unless we are going to change the cells dynamically)) and just style the two classes uses CSS.

或者完全放弃jQuery(因为我们不再需要它(除非我们要动态地更改单元格))，只使用CSS样式化这两个类。

#3

If you are printing the table from a database, simply assign a class to the td based on the result.

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

Then assign background color to that class.

然后为该类分配背景颜色。

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

}

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

Why do you need to use javascript for this in the first place?

为什么一开始就需要使用javascript呢?

If I am not mistaken, the above code is jQuery so don't forget to add the Lib if you use that.

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

#4

I recently had to do something like this. I needed to change the background color to red (well, pinkish) when an error occurred and leave it white when everything was good. Here's my code:

我最近不得不做这样的事。当出现错误时，我需要将背景色改为红色(好，粉红色)，当一切都很好时，将其保留为白色。这是我的代码:

warning_color = "#ffffff";

if (error_happened)
    warning_color = "#ffaaaa";

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

#5

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

#6

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

Then you could have a .Paid class and a .Received class and set the css in those classes respectivly. This way if you ever wanted to change the css later it is abstracted away from the javascript. Also you could use these classes in other locations as well if need be.

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

#1