如何用css更改html表中每个单词实例的颜色？

I have the following table in html using AngularJS:

我使用AngularJS在html中有下表:

<table id="searchTable">
    <thead>
        <tr>
            <th>Index</th>
            <th>Observation</th>
            <th>Reported By</th>
            <th>Verified By</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="observation in observations| filter:searchText">
            <th> {{$index + 1}} </th>
            <th>{{observation.clinicalType}}</th>
            <th>{{observation.reportedBy}}</th>
            <th>{{observation.verifiedBy}}</th>
            <th>{{observation.reportedDate}}</th>
        </tr>
    </tbody>
</table>

In the columns "Observations", "Reported By", "Verified By", and "Date", it is possible to have the string "NULL". I was wondering if there is a quick and easy way in CSS to color each instance of "NULL" in red in all of the four columns? I've been stuck there for quite some time.

在“Observations”,“Reported By”,“Verified By”和“Date”列中,可以使字符串为“NULL”。我想知道在CSS中是否有一种快速简便的方法可以在所有四列中为每个“NULL”实例着色为红色?我已经被困在那里很长一段时间了。

1 个解决方案

#1

Personally I'd suggest doing this in Jquery. You could look for all <th> elements that contain "NULL" and change them to red by doing the following...

就个人而言,我建议在Jquery中这样做。您可以查找包含“NULL”的所有元素,并通过执行以下操作将其更改为红色...

$(document).ready(function() {

   $("th:contains('NULL')").css("color", "red");

});

JSFiddle: https://jsfiddle.net/97oqnuyx/

EDIT: Because you've graciously accepted my answer, however it actually doesn't seem to solve the issue in your specific case, I feel I should make sure that I'm not spreading misinformation in the event people find this.

编辑:因为你已经慷慨地接受了我的答案,但它实际上似乎并没有在你的具体情况下解决问题,我觉得我应该确保在人们发现这一点时我没有传播错误的信息。

While my answer above will work in many cases, this is probably not the way to go if you're using Angular. In that event, you're looking for a solution more like this one, which OP linked to in a comment above.

虽然上面的答案在很多情况下都有用,但如果您使用的是Angular,这可能不是可行的方法。在那种情况下,您正在寻找更像这样的解决方案,OP在上面的评论中链接到了。