jQuery jQuery根据文本更改表格单元格文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7986581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change table cell text color based on text
提问by AnonyMouse
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 tdlike:
对于具有此状态的单元格，我添加了一个类td：
<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.
但是我不确定如何根据文本设置状态颜色。即所有“收到”设置颜色为红色，所有“付费”设置颜色为绿色。
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 方法？
回答by Clive
This will work:
这将起作用：
$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');
回答by PeeHaa
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 statuscells to check the status and change the color.
您可以遍历所有status单元格以检查状态并更改颜色。
$('.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/).
您也可以.contains()为此使用 jQuery ( http://api.jquery.com/contains-selector/)。
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-receivedand status-paidsince you already know the status of the cells while rendering them.
为什么不向单元格添加两个额外的类：status-received并且status-paid因为您在渲染它们时已经知道单元格的状态。
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 的样式。
回答by mindmyweb
If you are printing the table from a database, simply assign a class to the tdbased 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。
回答by rogerlsmith
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);
回答by Abdullah Jibaly
$('td.status').each(function() {
if ($(this).text() == 'Received') {
$(this).style('color', 'red');
} // similarly for other statuses
});
回答by Keith.Abramo
$('.status').addClass($(".status").html());
Then you could have a .Paidclass and a .Receivedclass 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 中抽象出来。如果需要，您也可以在其他位置使用这些类。
